Question

我正在创建一个自定义多选项框，我需要将一个选定值数组传递给元素

var data=[];
$(".opt > div").click(function(){
  data[data.length]=$(this).attr("value");
  $(".options").val(data);  // putting data into custom option
});

HTML

<div class="wrapper"> <!-- own custom style -->
  <select class="options"> <!-- select is hidden with CSS -->
    <!-- options -->
  </select>
</div>

<div class="opt"> <!-- this div is dynamically created by clicking         no class wrapper and populated the inside with select box's options with jQuery -->
  <div value="0">item 1</div>
  <div value="1">item 2</div> 
  <div value="2">item 3</div> 
</div>

一切进展顺利但是在点击事件中，我想用数组“数据”来评价.option类，并在提交请求时通过它的表单传递它。如何将数组（数据）设置为它的值？

就像在复选框中一样，给出像 name =“somename []”这样的名称会使响应成为一个数组。或者

上面的代码只是我想要的简要演示

Answer 1

首先，选择多个并为其命名：

<select name="cmbSomeName" class="options" multiple="multiple">

其次，在单击时，重置选择选项并重新选择数据数组中的所有选项。

var data=[];
$(".opt > div").click(function(){
   data[data.length]=$(this).attr('value');

   //Unselect all the options
   $('.options option').each(function(){ this.selected = false; })

   //For each item in data, select the respective option in the select
   $.each(data, function(){
      $('.options options[value="' + this + '"]').prop('selected', true);
   });
});

最后，当您提交表单时，cmbSomeName将是服务器端的数组

重要的是要注意这段代码总是会增加data []数组，因此，你不会启用“取消选择”那些itens，因为，我会做不同的编码，如下所示：

 $(".opt > div").click(function(){
      jqOption = $('.options options[value="' + $(this).attr('value') + '"]');

      //Toggle (if true then false else true)
      jqOption.prop('selected', !jqOption.prop('selected'));
 })

Answer 2

使用，

$(".options").append(data);

不要使用值来编写html

Answer 3

DEMO

诀窍是：

克隆选择options
将它们放在DIV内（好吧，谁在意，效果很好）
定位DIV上的原始Select元素点击：

<div class="wrapper"> <!-- note! it wraps the select and the .opt -->
  <select class="options" multiple>
    <option value="0">Item 1</option>
    <option value="1">Item 2</option>
    <option value="2">Item 3</option>
  </select>
  <div class="opt"></div> <!-- will be populated by jQ -->
</div>

$('.options').each(function(){ 
  $(this).next('.opt').html($(this).html());
});

$('.opt').on('click', 'option', function(){
  $(this).toggleClass('selected')
         .parent().prev('select')
         .find('option[value='+ this.value +']')[0].selected ^= 1;
});

使用这个基本的CSS：

.opt option{
  background:#eee;
  border-bottom:1px solid #888;
  cursor:pointer;
}
.opt option:hover{
  background:#ddd;
}
.opt option.selected{
  background:#cf5;
}

使用jQuery </option>将数组传递给<option>

3 个答案: