jQuery将选择框设置为空选项

Posted

技术标签:

【中文标题】jQuery将选择框设置为空选项【英文标题】:jQuery set select box to empty option 【发布时间】:2017-01-26 06:49:30 【问题描述】:

这是我正在使用的 jQuery 代码,它可以帮助我在更改第一个选择框时获取所需的选择框的值。

$(document).ready(function () 
    $("#select1").change(function()
      $('.quantity').val('');
      $('#trblock').fadeIn();
      if ($(this).data('options') == undefined) 
        $(this).data('options', $('#select2 option').clone());
      
      var id = $(this).val();
      var options = $(this).data('options').filter('[value=' + id + ']');
      $('#select2').html('<option value="">').append(options);
    );
);

这里发生的情况是,每当我从第一个选择框更改选择框值时,我都会在第二个选择框中得到一些值。但是当我回滚到第一个文本框中先前选择的选项时,我发现第二个选择框已经显示了我之前选择的选项。我想要的是,每当我更改选择第一个选择框选项时,第二个选择框应该以 &lt;option value=""&gt;&lt;/option&gt; 之类的空白选项开头,而不是第二个选择框中先前选择的选项。

为方便起见,我将其滚动到点。

    在第一个选择框示例“动物”中选择了一个选项。

    <select name="" id="select1"> <option value=""></option> <option value="1">Animals</option> <option value="2">Games</option> <option value="3">Fruits</option> </select>

    在第二个选择框中得到了一些值。

    <select name="" id="select2"> <option value=""></option> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Monkey</option> </select>

    从第二个选择框示例“Dog”中选择了一个值。

    然后我想从第一个选择框切换选择,所以我选择了“水果”。

    在第二个选择框中得到了一些值。

    <select name="" id="select2"> <option value=""></option> <option value="1">Apple</option> <option value="2">Banana</option> <option value="3">Grapes</option> </select>

    这次我选择了葡萄。好的,到这里为止。

    但是,如果我再次将我的第一个选择更改为动物,我应该让第二个选择框以空选项(空白字段)开始,但它以先前选择的“狗”开始。这是我不想要的。每次我从第一个选择框中更改选择选项时,我希望第二个选择框以空白选项字段开头,以便我可以再次从完整列表中进行选择,即“猫”、“狗”、“猴子”。

【问题讨论】:

【参考方案1】:

select1的更改事件的最后添加$('#select2').val(''),如下所示。

$("#select1").change(function () 
    $('.quantity').val('');
    $('#trblock').fadeIn();
    if ($(this).data('options') == undefined) 
        $(this).data('options', $('#select2 option').clone());
    
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html('<option value="">').append(options);

    $('#select2').val(''); //add this line
);

【讨论】:

已经尝试过......事实上......这是我想到的第一件事......但这没有帮助:( “没有帮助”没有用。发生了什么?您的错误日志中有错误吗?这个答案是正确的,我猜你的解决方案是问题所在。编辑您的问题,展示您如何尝试实现此功能,以便我们查看/帮助 对不起兄弟..我错了..这对我有用..我把它放在 $('.quantity').val(''); 之后的第三行也许这就是它不起作用的原因..但是在放置你说它起作用的地方之后..谢谢兄弟.. :) 你是对的@cale_b ..我实现了相同的代码 b4 但位置错误..现在已纠正并正常工作...感谢 Azim

以上是关于jQuery将选择框设置为空选项的主要内容,如果未能解决你的问题,请参考以下文章

Django/jQuery 级联选择框?

JQuery/Javascript:IE 悬停不包括选择框选项?

jquery 选中文本框 jquery 文本框样式 jquery 改变样式

选择第一个选项为空的框

使用 jQuery 重置选择框值

jQuery - 禁用选项时更改选择值