Question

如何更改两个下拉列表的值。用普通ddls按钮或箭头图标交换每个其他下拉列表的值是什么意思。

Answer 1

HTML：

<label>Browser Select 1</label>
  <select class="browser-default" id="drop1">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

<label>Browser Select 2</label>
  <select class="browser-default" id="drop2">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 4</option>
    <option value="2">Option 5</option>
    <option value="3">Option 6</option>
  </select>

<button id="switch">switch</button>

JQUERY：

$('#switch').click(function(){
    var options1 = $('#drop1').html();
    $('#drop1').html($('#drop2').html());
    $('#drop2').html(options1);
});

简单的javascript，感谢Spencer：

document.getElementById("switch").onclick = function() {
    var drop1 = document.getElementById("drop1");
    var drop2 = document.getElementById("drop2");
    var tempHTML = drop1.innerHTML;

    drop1.innerHTML = drop2.innerHTML;
    drop2.innerHTML = tempHTML;

}

http://jsfiddle.net/5g550tqq/3/

Answer 2

您可以按照以下方式执行此操作：

<强> HTML

<table>
    <tr>
        <td>
            <select id="mySelect1" size="5" multiple style="width:200px">
                <option value="opt1">Option 1</option>
                <option value="opt2">Option 2</option>
                <option value="opt3">Option 3</option>
            </select>
        </td>
        <td valign="center">
            <button id="toRight">►</button><br/>
            <button id="toLeft">◄</button>
        </td>
        <td>
            <select id="mySelect2" size="5" multiple style="width:200px">
                <option value="opt4">Option 4</option>
                <option value="opt5">Option 5</option>
                <option value="opt6">Option 6</option>
            </select>
        </td>
    </tr>
</table>

Javascript（纯）

function moveOptionsTo(index) {
    var target = document.getElementById('mySelect' + index);
    var options = document.getElementById('mySelect' + (3-index)).options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].selected) {
            target.appendChild(options[i]);
            i = i - 1;
        }
    }
}
document.getElementById('toRight').onclick = function() {
    moveOptionsTo(2);
};
document.getElementById('toLeft').onclick = function() {
    moveOptionsTo(1);
};
document.getElementById('mySelect1').ondblclick = function() {
    moveOptionsTo(2);
};
document.getElementById('mySelect2').ondblclick = function() {
    moveOptionsTo(1);
};

替代方案：jQuery

的Javascript

function moveOptionsTo(index) {
    $('#mySelect' + (3-index) + ' option:selected').appendTo('#mySelect' + index);
}
$('#toRight').click(function() {
    moveOptionsTo(2);
});
$('#toLeft').click(function() {
    moveOptionsTo(1);
});
$('#mySelect1').dblclick(function() {
    moveOptionsTo(2);
});
$('#mySelect2').dblclick(function() {
    moveOptionsTo(1);
});

以下是使用上述代码的fiddle。这允许多项选择并双击项目或按钮移动。

如何使用javascript将一个按钮交换两个下拉列表

2 个答案: