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

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查找所需的选择元素，并使用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);
}