Как получить элемент select по значению опции

Question

Я пытаюсь получить весь элемент select по значению опции, используя jquery, но не получаю его. Идентификатор элемента 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

установите 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> 

wirte script как ниже

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

Answer 3

Это то, что я использовал недавно, чтобы сделать именно это.

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

Answer 4

, если вы хотите найти выбор по значению 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>