如何使用其数据属性查找和设置HTML-Select元素？

Question

我有以下HTML：

<select name="1028071" class="LC" id="1028071" style="width: 100%;">
    <option selected="selected" value="-1">[Please select a value]</option>
    <option value="10604534" data-uid="154b2706-505e-401c-a066-a37a1889e3be">[Other]</option>
    <option value="10604535" data-uid="25070b3b-8215-440b-b3cf-c6cf52f01efc">Reason 1</option>
    <option value="10604536" data-uid="fd3394ea-a7e8-45e8-8385-71dee98238ff">Reason 2</option>
</select>

我正在尝试预选[Other].value和文本都是变量。跨环境的唯一固定值是data-uid。

我尝试了以下几种方法，但都不起作用：

var other = $(formalRequestReasonFieldId).find("option").filter(function() {
    return $(this).data('uid') == '154b2706-505e-401c-a066-a37a1889e3be';
});

alert(other.text()); // returns blank text
other.attr('selected', true); // does not work, no errors

Answer 1

如果formalRequestReasonFieldId是Select：

var other = $('#'+formalRequestReasonFieldId).find('option[data-uid="154b2706-505e-401c-a066-a37a1889e3be"]');

//Other Text
var text = other.text();

//Select It
other.prop("selected", true);

JSFiddle：https://jsfiddle.net/6opqnxhy/