選擇國家後的文本框插入

Question

我有一個表單，用戶必須從以下選擇國家。如果用戶選擇澳大利亞我想填充一個文本字段，用戶可以輸入那裏的手機號碼，以便爲那個特定的國家我可以存儲這些用戶的手機號碼。我試着用if語句，但它不工作。在註冊過程中 如果用戶選擇澳大利亞我希望他們也進入那裏的手機號碼和其他用戶的手機號碼，不需要

if(location==Australia){ 
echo'<tr> 
<td width="49" ><div align="left"></p><p> 
Mobile No</div></td><td> 
<input type="text" size="20" name="mobile" value="'.h($_REQUEST['mobile']).'" class="fpost" style="width:220px" /></tr>';} 



<tr class="row1"><td>Come from</td><td> 
       <select name="location" class="inputText"><option value="Afghanistan ">Afghanistan </option><option value="Albania ">Albania </option><option value="Algeria ">Algeria </option><option value="American Samoa ">American Samoa </option><option value="Andorra ">Andorra </option><option value="Angola ">Angola </option><option value="Anguilla ">Anguilla </option><option value="Antarctica ">Antarctica </option><option value="Ant &amp; Bar ">Ant &amp; Bar </option><option value="Argentina ">Argentina </option><option value="Armenia ">Armenia </option><option value="Aruba ">Aruba </option><option value="Australia ">Australia </option><option value="Austria ">Austria </option><option value="Azerbaijan ">Azerbaijan </option><option value="Bahamas ">Bahamas </option><option value="Bahrain ">Bahrain </option><option value="Bangladesh ">Bangladesh </option><option value="Barbados ">Barbados </option><option value="Belarus ">Belarus </option><option value="Belgium ">Belgium </option><option value="Belize ">Belize </option><option value="Benin ">Benin </option><option value="Bermuda ">Bermuda </option><option value="Bhutan ">Bhutan </option><option value="Bolivia ">Bolivia </option><option value="Bosnia ">Bosnia </option><option value="Botswana ">Botswana </option><option value="Bouvet">Bouvet</option><option value="Brazil ">Brazil </option><option value="Brunei">Brunei</option><option value="Zimbabwe">Zimbabwe</option></select> 

Answer 1

我第一次嘗試，並從分開我的輸出邏輯我數據與這樣的東西，其中$countries是國家名稱的字符串數組。

<tr class="row1"> 
    <td>Come from</td> 
    <td> 
    <select name="location" id="location" class="inputText"> 
<?php 
    foreach ($counties as $country) { 
     echo '<option value="', $country, '">', $country, '</option>'; 
    } 
?> 
    </select> 
    <td> 
</tr> 

然後，我會使用jQuery的.change()功能或類似的框架來處理下拉。

$('#location').change(function() { 
    if ($(this).val() == 'Australia') { 
     // Show the text box 
    } 
}); 

Answer 2

好吧，我想你想是這樣的......（純JavaScript，沒有jQuery的。對於下面的代碼工作，一個ID添加到select元素，另一個用於textbox元素）

var showTextBox = function(prefix) { // Function to add the textbox with defined value 
    var textBox = document.getElementById('textbox') 
    textBox.value = prefix 
    textBox.style.display = 'block' 
} 
document.getElementById('select').onchange = function(e) { 
    var target = e.target || window.event // Cross-browser target 
    switch (target.value) { // Depending on the value 
     case 'Australia': 
      showTextBox('+61 ') // Use the function with the correct prefix 
      break; 
     case 'otherCountry': 
      showTextBox('+XX ') 
    } 
} 

switch聲明使得如果您稍後想要添加另一個國家，很容易這樣做。

P.S：I'm feeling lonely。

Answer 3

如果在頁面上包含jQuery Library，則可以實現此效果，包括良好的滑動效果。

添加id="mobile_container"到包含手機號碼領域tr元素，並添加像這樣到您的網頁：

<script type="text/javascript"> 
$(function() { 

    // Hide the mobile field initially 
    if($("select[name='location']").val() != 'Australia') { 
     $("tr#mobile_container").hide(); 
    } 

    $("select[name='location']").change(function(){ 
     // This fires when user changes location 
     if($(this).val() == 'Australia') { 
      // Australia selected, let's show the mobile row 
      $("tr#mobile_container").slideDown(); 
     } else { 
      // Australia not selected, we make sure mobile row is hidden 
      $("tr#mobile_container").slideUp(); 
     } 
    }); 
}); 
</script>