Question

我有一个选择表格：

<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();＆＃34;标签3＆＃34;将以选择的形式显示

我不确定更改<select>标签的功能是什么。我尝试了这些，但他们没有工作：

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

<强> jsFiddle example

Answer 4

显然有些人在我写回复时打败了我，但是呃......这是一个非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/

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

4 个答案: