Question

我有一个表单，用户必须从以下选择国家/地区。如果用户选择澳大利亚我想再填充一个文本字段，用户可以在那里输入手机号码，以便对于该特定国家我可以存储手机号码那些users.i尝试使用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。为了使下面的代码工作，为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：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>

选择国家后插入文本框

3 个答案: