【问题标题】:Multiselect options with each option selecting multiple times using jquery使用 jquery 多次选择每个选项的多选选项
【发布时间】:2015-02-27 08:37:15
【问题描述】:

选择数字(您可以选择每个数字任意多次):

 <select name="number_selection" method="post" id="number_selection" >
  <option value="0">0</option>
  <option value="1">1 </option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<input type="button" value="Select" id="select_button"/> 


 <div id="feedback"> </div>

我在 jquery 中尝试过的是这个......

$('#select_button').click(function(){
    var gs= $('#number_selection').val();
    $('#feedback').html(gs);            
    });

现在,我要做的是,如果我从选项中选择一个数字,它应该显示在“div”中,如果我再次选择另一个数字或相同的数字,它应该显示在第一个数字旁边,但我只能选择一个数字,而不是多个数字。我想使用 jquery 来做到这一点

如果你不明白我的问题,我可以进一步解释给你。请帮忙。

如果我想从附加列表中取消选择每个元素? 我已经尝试过了……但没有用。

$('#select_button').click(function(){
    var gs= $('#number_selection').val();
    $('#feedback').append(gs + '  ' + '<input type="button" value="Remove" id="gs_remove" />' + '<br>');

    });

    $('#gs_remove').click(function(){
    (this).hide();
    });

但我无法删除每个选定的选项。

【问题讨论】:

  • 选择按钮的用途是什么?并且您想在反馈 div 中显示数据??
  • 每次替换 #fcb_pt_gs html 时。您可以通过写$('#fcb_pt_gs').append(gs); 将另一个数字放在下面,或者如果您想要类似“12345...”的内容,您可以这样做:$('#fcb_pt_gs').html($('#fcb_pt_gs').html() + gs);
  • 如果我想从附加列表中取消选择每个元素?

标签: javascript jquery select options


【解决方案1】:

替换

 $('#fcb_pt_gs').html(gs);

 $('#fcb_pt_gs').append(gs);

【讨论】:

  • 如果我想取消选择每个数字怎么办?
  • ('#select_button').click(function(){ var gs= $('#number_selection').val(); $('#feedback').append(gs + ' ' + '' + '
    '); }); $('#gs_remove').click(function(){ (this).hide(); });但有了这个我无法删除每个选定的选项。
【解决方案2】:
$('#select_button').click(function() {
    var _val = $('#fcb_pt_gs').text();
    var gs= $('#number_selection').val();

    if( _val == "" ) {
      var _collection = [];
    }
    else {
      // Add in collection
      var _collection = [_val];
    }

    _collection.push( gs );

    $('#fcb_pt_gs').html( _collection.join(',') );           
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-02
    相关资源
    最近更新 更多