在选择国家/地区后插入文本框 - text box insertion after selection of country

我有一个表格，用户必须从下面的表格中选择一个国家。如果用户选择澳大利亚，我想再填充一个文本字段，用户可以在其中输入手机号码，这样我就可以为那个特定的国家存储这些用户的手机号码。我尝试过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>

我首先尝试用这样的东西将输出逻辑与数据分离，其中$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
    }
});

如果您在页面上包含jQuery库，您可以实现这一点，包括一个不错的幻灯片效果。

将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>

好吧，我想你想要这样的东西。。。（纯javascript。没有jQuery。要使以下代码工作，请为select元素添加一个ID，为textbox元素添加另一个ID）

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.：我感到孤独。