如何通过按钮更改选择表单

How to change a select form by buttons

本文关键字：选择 表单 何通过 按钮      更新时间：2023-09-26

>我有一个选择表单：

<select>
    <option value ="one">Label 1</option>
    <option value ="two">Label 2</option>
    <option value ="three">Label 3</option>
</select>

但我也有一些按钮可以调用与选择表单相同的函数

<button class="one">Label 1</button>
<button class="two">Label 2</button>
<button class="three">Label 3</button>

因此，如果我选择这些按钮之一，我该如何更改选择表单中显示的选项（我的意思是打开表单之前表单中的文本）？

因此，如果您$("button.three").click();"标签3"将显示在选择表单中

我不确定更改<select>标签的功能是什么。我试过这些，但它们不起作用：

$("select").select().val("three");
$("select").find([value="three"]).select();
$("select").selectedIndex = 1;

$("button").on("click", function() {
    var selectedClass = $(this).attr("class");
    $("option[value="+ selectedClass + "]").attr("selected", true);
});

尝试$("select").val("three");

http://api.jquery.com/val/#val-value

这似乎是最简单的解决方案：

$("button").click(function () {
    $('select').val($(this).attr('class'))
});

js小提琴示例

显然，当我写回复时，其他人打败了我的答案，但是嗯......这是一个非jQuery解决方案。;)

var buttons = document.getElementsByTagName('button');
var mySelect = document.getElementById('mySelect');
var mySelectOptions = mySelect.getElementsByTagName('option');
for (var i = 0, length = buttons.length; i < length; i++) {
    var button = buttons[i];
    button.onclick = function(event) {
        var text = event.target.innerText;
        for (var x = 0, length = mySelectOptions.length; x < length; x++) {
            var option = mySelectOptions[x];
            if (option.innerText === text) {
                mySelect.selectedIndex = x;
                return;
            }
        }
    }
}

http://jsfiddle.net/bvaughn/x1chabLa/

相关文章：