根據現有元素使用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/