Question

在我的页面上可以有几个＆lt; select＆gt;使用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的帮助下，我想为每个＆lt; select＆gt;制作在具有类自定义的.selectBox的页面上，其中包含来自此＆lt; select＆gt;的数据。来自＆lt; select＆gt;的选项值和文字应该在＆lt; span＆gt;使用class selectOption。我怎么能更好地做到这一点？

Answer 1

我认为你要求的是jquery multiple select

Answer 2

问题不是很明确，但我想您希望从ID为test2的select中获取选项，并将自定义选择.selectBox的选项替换为它们。

添加selectBox2之类的ID，将其引荐给选择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>

试一试！

顺便说一下：你一定要看看 - ＆gt; https://silviomoreto.github.io/bootstrap-select/

使用jQuery根据现有元素创建HTML元素

2 个答案: