Скрытие опции от выбора на основе описания

Question

Я немного новичок в jquery, но мне нравится короткий компактный и мощный код. Я пытаюсь удалить опцию из выбора, который выбирается из БД. Значения разных опций могут отличаться, поэтому мне нужно выбирать из описания, а не из значения. Из других вопросов кажется, что большинство решений смотрят на значение параметра, но в моем случае значение может измениться, но не описание.

Вот пример выходных данных на странице:

<div class="entityPropertyValueEdit entityPropertyValueEdit_ProjectSelect col-sm-9">
<select propertyid="347" name="e_prop[347]" id="e_prop[347]" class="" rel="Project Select">
    <option value="80" selected="selected">Unknown</option>
    <option value="972">Manager</option>
    <option value="18325">Sales</option>
    <optgroup label="Branches Sales">
        <option value="1016">New York</option>
        <option value="1022">London</option>
        <option value="1028">Paris</option>
    </optgroup>
    <optgroup label="Optional Sales">
        <option value="1089">Dublin</option>
        <option value="1095">Hong Kong</option>
        <option value="1101">Berlin</option>
    </optgroup>
</select>
</div>

Мне нужно скрыть опцию с описанием Берлин . Метки optgroup всегда будут одинаковыми. Имя класса div всегда будет одинаковым (на странице может быть несколько вариантов выбора), а значение rel всегда будет «Выбор проекта». Метки optgroup также являются постоянными.

Answer 1

Если вы получаете значения из базы данных, это означает, что вы можете использовать описание для установки альтернативного свойства для каждого элемента option.

Рассмотрите этот пример:

<option value="1101" data-description="Berlin">Berlin</option>

Затем вы можете выбрать любой элемент по атрибуту и ​​скрыть его:

var description = 'Berlin';

$('option[data-description=' + description + ']').hide();

Надеюсь, вы найдете это полезным.

Answer 2

Используйте filter, чтобы скрыть ваш выбор.

var hidetext = 'Berlin';
$('.entityPropertyValueEdit select option')
  .filter(function() {
    if ($(this).text() == hidetext)
      $(this).hide();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entityPropertyValueEdit entityPropertyValueEdit_ProjectSelect col-sm-9">
  <select propertyid="347" name="e_prop[347]" id="e_prop[347]" class="" rel="Project Select">
    <option value="80" selected="selected">Unknown</option>
    <option value="972">Manager</option>
    <option value="18325">Sales</option>
    <optgroup label="Branches Sales">
      <option value="1016">New York</option>
      <option value="1022">London</option>
      <option value="1028">Paris</option>
    </optgroup>
    <optgroup label="Optional Sales">
      <option value="1089">Dublin</option>
      <option value="1095">Hong Kong</option>
      <option value="1101">Berlin</option>
    </optgroup>
  </select>
</div>