获取具有特定值的元素,将其选中

Question

我有一个带有这个禁用的select元素的表单(我用jquery禁用了它)

<select class="select form-control" id="ifacility" name="facility">
    <option value="" selected="selected">------</option>
    <option value="1">Room 1</option>
    <option value="2">Room 1</option>
    <option value="3">Room 2</option>
    <option value="4">Room 3</option>
</select>

我想用它Jquery来找到一个带有名称的选项,Room 2并将其选中.

$(document).on('click', '.select-option', function() {
    var room = $(this).attr('value') //This is what gives the 'Room 2'
    //I want to select this room from the options and make it selected
});

Answer 1

你真的不需要jQuery,所以这里是一个简单的JavaScript解决方案.

声明这个功能:

function setOptionByValue(select, value){
    var options = select.options;
    for(var i = 0, len = options.length; i < len; i++){
        if(options[i].textContent === value){
            select.selectedIndex = i;
            return true; //Return so it breaks the loop and also lets you know if the function found an option by that value
        }
    }
    return false; //Just to let you know it didn't find any option with that value.
}

像这样使用它:

setOptionByValue(document.getElementById('ifacility'), 'Room 2');

演示