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');

Demo

Answer 2

使用filter()的jQuery解决方案：

var room2 = $('#ifacility option').filter(function() { 
    return $(this).text() == 'Room 2';
});

// room2.val() = '3'
$('#ifacility').val(room2.val());

Fiddle

Answer 3

如果您想使用jQuery完成任务，请尝试使用

$('#ifacility').find('option:contains("Room 2")').prop('selected', true);

它按文本查找选项并设置其选定的属性。

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

3 个答案: