0

我正在尝试制作一个选项下拉菜单，如果选择了“其他”选项，当我尝试显示一个文本框时我被卡住了。

这就是我所拥有的：

<span id="con-country"><label for="country">Country: </label>
<select name="country" required="required">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option id="other" value="other">Other</option>
</select>
</span>

<span id="con-specify">
<label for="specify">Specify: </label>
<input type="text" name="specify" id="c-specify" required="required"></input>
</span>

CSS：

#con-specify{
    margin-left: 50px;
    display: none;
}

简单吧？，问题是我不知道如何在 jQuery 中编写代码

那么，如果用户在菜单中选择其他，那么应该会出现文本框，我该怎么做呢？

4

3 回答 3

1

尝试

//dom ready handler
jQuery(function($){
    //change event handler for the select
    $('select[name="country"]').change(function(){
        //set the visibility of the specify element based on the value of select
        $('#con-specify').toggle(this.value == 'other')
    }).change();//fire the change event so that the initial visibility is set
})

演示：小提琴

在http://api.jquery.com/中阅读有关每种方法的更多信息

于 2013-10-22T02:50:50.360 回答
0

如果您已经使用 jQuery，只需使用$('#con-specify').show()和 $('#con-specify').hide()

于 2013-10-22T02:52:04.227 回答
0

您需要在 html 的头部添加一个 jQuery 链接：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

下拉菜单应该有一个 id（即：国家）。

然后你的 javascript 看起来像这样：

    window.onload = function() {
      $('#con-specify').hide();

      $('#country').change(function(){
        if($(this).val() == 'other') {
            $('#con-specify').show();
        } else {
            $('#con-specify').hide();
        }
      });
    };
于 2013-10-22T03:45:57.293 回答