根据现有元素使用jQuery

Question

在我的页面可以是几个创建HTML元素<选择>与HTML结构是这样的：

<select name="test" id="test" class="custom"> 
    <option value="test 1.1">test 1.1</option> 
    <option value="test 1.2">test 1.2</option> 
    <option value="test 1.3">test 1.3</option> 
</select> 

<select name="test2" id="test2" class="custom"> 
    <option value="test 2.1">test 2.1</option> 
    <option value="test 2.2">test 2.2</option> 
    <option value="test 2.3">test 2.3</option> 
</select> 

而且.selectBox结构是这样的：

<div class="selectBox"> 
    <span class="selected"></span> 
    <span class="selectArrow">&#9660;</span> 
    <div class="selectOptions"> 
     <span class="selectOption" value="Option 1">Option 1</span> 
     <span class="selectOption" value="Option 2">Option 2</span> 
     <span class="selectOption" value="Option 3">Option 3</span> 
    </div> 
</div> 

的帮助jQuery的我想为每个<与类定制自己.selectBox的页面从这个数据上选择> <选择>。从<选择>的选项的值和文本应在<范围>与类selectOption。我怎么能更好地做到这一点？

Answer 1

我想你问的是jQuery的多重选择

Answer 2

的问题是不是超级清楚，但我想你想从选择的选项ID为test2例如，更换自定义的选项中进行选择.selectBox与他们。

添加到它的ID喜欢selectBox2它指的是选择test2。

var selectOptions = []; 
 
    
 
$('#test2 option').each(function() { 
 
    selectOptions.push($(this).val()); 
 
}); 
 
     
 
$('#selectBox2 .selectOption').each(function(i, val) { 
 
    $(this).attr("value", selectOptions[i]); 
 
    $(this).html(selectOptions[i]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="test2" id="test2" class="custom"> 
 
    <option value="test 2.1">test 2.1</option> 
 
    <option value="test 2.2">test 2.2</option> 
 
    <option value="test 2.3">test 2.3</option> 
 
</select> 
 

 
<div class="selectBox" id="selectBox2"> 
 
    <span class="selected"></span> 
 
    <span class="selectArrow">&#9660;</span> 
 
    <div class="selectOptions"> 
 
     <span class="selectOption" value="Option 1">Option 1</span> 
 
     <span class="selectOption" value="Option 2">Option 2</span> 
 
     <span class="selectOption" value="Option 3">Option 3</span> 
 
    </div> 
 
</div>

试试看吧！

顺便说一句：你一定要看看 - >https://silviomoreto.github.io/bootstrap-select/