javascript - 按文本而非值设置 SELECT 元素

Question

我确信这相对容易和直接，但我没有成功解决它。

我正在尝试使用以下代码设置下拉列表元素的选定选项:

        if ($(this).attr("tagName") == "SELECT") {

            oldValue = $(this).parent().parent().find('span.displayField').text();
            $(this).val(oldValue).attr("selected", "selected");
            return;
        }

但它根本没有改变 select 元素。代码确实在运行，oldValue 正在被适本地填充。

谁能看出我可能遗漏了什么？

谢谢!

更新:

为清楚起见，这里是 HTML:

        <span class="displayField">Pending</span>
        <span class="editField">            
            <select data-val="true" data-val-number="The field ProgramStatusId must be a number." data-val-required="The ProgramStatusId field is required." id="ProgramListViewModels_0__ProgramStatusId" name="ProgramListViewModels[0].ProgramStatusId">
            <option value="1">Pending</option>
            <option value="2">Tabled</option>
            <option value="3">Approved</option>
            <option value="4">Declined</option>
            </select>  
        </span>

Answer 1

$(this).val(oldValue) 会将 this 的值设置为 oldValue，而您只想用它找到选项泰西。你想使用 :contains()为此。

    if ($(this).is('select')) {
        oldValue = $(this).parent().parent().find('span.displayField').text();
        $('option:contains('+oldValue+')', this).attr("selected", "selected");
        return;
    }

或者如果有多个包含文本但不同的选项，试试这个:

    if ($(this).is('select')) {
        oldValue = $(this).parent().parent().find('span.displayField').text();
        $('option', this).filter(function(){
          return this.text === oldValue;
        }).attr("selected", "selected");
        return;
    }