将数组传递给<；选项>；使用jQuery

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

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

HTML

项目1
项目2
项目3

一切都进行得很顺利，但在单击事件时，我希望对带有数组“data”的选项类进行赋值，并在提交请求时通过其表单进行传递。如何将数组（数据）设置为其值

在复选框中，指定name Like name=“somename[]”将使响应成为数组。 或

上面的代码只是我想要使用的一个简短演示

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

不要在编写html时使用值

诀窍在于：

• 克隆选择

  选项

• 将它们放在

  DIV

  中（好吧，谁在乎呢，它工作得很漂亮）
• 以DIV上的原始Select元素为目标单击：

使用此基本CSS：

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

---

首先，将您的“选择”设置为“多重”，并为其命名：

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

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

需要注意的是，此代码将始终增加data[]数组，因此，您将无法“取消选择”这些ITEN，为此，我将执行如下不同的编码：

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

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

---

我不是在写HTML，我是在尝试用jQuery来评价它，因为它在正常情况下是自然发生的box@Ario这不是

的工作方式。这个值包含在它的

元素中。但是我对一个值做了同样的处理，你应该反过来处理这个问题。使用html中的选项进行选择。然后使用

CSS

隐藏它，并使用

jQuery

动态构建“自定义多选项”。不要忘记将

multiple

属性添加到您的

select

：

是，但我想传递多个值。类似于值0和1together@Ario：您是指0和项1还是（1和项2）？我指的是值0和1（属性数据值）@Ario，而不是您不想要的

选择
下拉列表：）因为
不是这样工作的。。。或者我理解你的问题完全错了…@Ario你实际上想要一个
选择多个
，对吗？因为在您的HTML示例中，您没有说明它是一个
多个
as属性
.opt option{
  background:#eee;
  border-bottom:1px solid #888;
  cursor:pointer;
}
.opt option:hover{
  background:#ddd;
}
.opt option.selected{
  background:#cf5;
}

<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);
   });
});

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

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