如何通过选项值获取选择元素

Question

我正在尝试使用jquery通过选项值获取整个select元素，但没有得到它。 select元素的ID是动态的，尚未加载。 所以我不能使用id来获取select元素。 因此，尝试使用选项值。

这是我尝试获取的select元素的示例：-

<select sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']">
   <option value="?" selected="selected"></option>
   <option label="TEST-1" value="string:TEST1">TEST-1</option>
   <option label="TEST-2" value="string:TEST2">TEST-2</option>
   <option label="TEST-3" value="string:TEST3">TEST-3</option>
   <option label="TEST-4" value="string:TEST4">TEST-4</option>
   <option label="TEST-5" value="string:TEST5">TEST-5</option>
</select> 

我尝试了以下方法：

var testSelectorText = "select['option[value='?']']";
angular.element(document.querySelectorAll(testSelectorText));

Answer 1

该行使用jquery查找所需的select元素，并使用一个option value进行标识。

sel = $("select option[value='string:TEST2']").closest("select");

让我知道这是否不是您想要的。

---

演示

 // Find the option with known value // Find the closest 'select' sel = $("select option[value='string:TEST2']").closest("select"); // Print name to demonstrate we found the item console.log(sel.attr("name")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']"> <option value="?" selected="selected"></option> <option label="TEST-1" value="string:TEST1">TEST-1</option> <option label="TEST-2" value="string:TEST2">TEST-2</option> <option label="TEST-3" value="string:TEST3">TEST-3</option> <option label="TEST-4" value="string:TEST4">TEST-4</option> <option label="TEST-5" value="string:TEST5">TEST-5</option> </select> 

Answer 2

如果要通过options值查找选择，请尝试以下操作：

$("select option[value='string:TEST3']").parent();

演示

 var testSelectorText = $("select option[value='string:TEST3']").parent(); console.log(testSelectorText.attr("id")) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']"> <option value="?" selected="selected"></option> <option label="TEST-1" value="string:TEST1">TEST-1</option> <option label="TEST-2" value="string:TEST2">TEST-2</option> <option label="TEST-3" value="string:TEST3">TEST-3</option> <option label="TEST-4" value="string:TEST4">TEST-4</option> <option label="TEST-5" value="string:TEST5">TEST-5</option> </select> 

Answer 3

这就是我最近用来做的。

$('option[value="string:TEST1"]').closest('select')

Answer 4

设置class选择

<select class='myClass' sf-field-model="" id="{{form.formId}}_{{interp(form.formTabId,{'$index':$index, value: item}) || $index}}" ng-disabled="form.readonly" sf-changed="form" class="form-control input-sm c" schema-validate="form" ng-options="item.value as item.name group by item.group for item in form.titleMap" name="_value" ng-model="item['_value']">
   <option value="?" selected="selected"></option>
   <option label="TEST-1" value="string:TEST1">TEST-1</option>
   <option label="TEST-2" value="string:TEST2">TEST-2</option>
   <option label="TEST-3" value="string:TEST3">TEST-3</option>
   <option label="TEST-4" value="string:TEST4">TEST-4</option>
   <option label="TEST-5" value="string:TEST5">TEST-5</option>
</select>
<button onclick="callMe()">get Value</button> 

如下的脚本

function callMe()
{
    var value = $("select.myClass").val();
    console.log(value);
}