Блог

Главная - Вопросы по программированию - Выберите вариант выделения на основе текста

Выберите вариант выделения на основе текста

#javascript #dom

#javascript #dom

Вопрос:

Мне это нужно в «современном DOM», если это возможно.

Вот код.

 <select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

Я пробовал следующее, но мне это нужно для текста, и это не работает.

 var val = 'US 10.5';    
document.querySelector('#skuAndSize [value="'   val   '"]').selected = true;

Пожалуйста, помогите, мне это нужно в современном dom, поскольку я использую его в Swift (evaluateJavaScript).

Ответ №1:

Вы можете установить SelectedIndex с помощью javascript

 const val = 'US 10.5';
const skuAndSize = document.getElementById ('skuAndSize');
skuAndSize.selectedIndex = [...skuAndSize.options].findIndex (option => option.text === val);  
 <select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

Ответ №2:

Вы можете использовать Array#find() и сравнить text свойство <option> с требуемым значением

 var val = 'US 10.5',
  options = document.querySelector('#skuAndSize').options,
  wantedOption = Array.from(options).find(o => o.text === val);
  
if (wantedOption) {
  wantedOption.selected = true;
}  
 <select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

Ответ №3:

Это версия jquery для вашего требования.

 $('#skuAndSize').change(function(){

var text1 = 'US 10.5';
$("#skuAndSize option").filter(function() {
    
    return $(this).text() == text1; 
}).prop('selected', true);

})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="skuAndSize" id="skuAndSize" class="ncss-btn fs16-sm ncss-base pb3-sm prl5-sm pt3-sm css-1rsed2n">
  <option value="" disabled="">Select Size</option>
  <option value="22348626:7" disabled="">US 7</option>
  <option value="22348625:7.5" disabled="">US 7.5</option>
  <option value="22348624:8" disabled="">US 8</option>
  <option value="22348621:8.5" disabled="">US 8.5</option>
  <option value="22348619:9" disabled="">US 9</option>
  <option value="22348623:9.5">US 9.5</option>
  <option value="22348618:10">US 10</option>
  <option value="22348622:10.5">US 10.5</option>
  <option value="22348635:11">US 11</option>
  <option value="22348634:11.5" disabled="">US 11.5</option>
  <option value="22348633:12">US 12</option>
  <option value="22348632:12.5" disabled="">US 12.5</option>
  <option value="22348631:13">US 13</option>
  <option value="22348630:14" disabled="">US 14</option>
  <option value="22348629:15" disabled="">US 15</option>
</select>

Ответ №4:

Быстрый ответ

Вы можете установить значение выбора, установив свойство value :

 document.querySelector('#skuAndSize').value = '22348622:10.5';

Смотрите https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Полный пример

 const tests = [4, 'Three', 2, '1'];
let i = 0;

window.setInterval(() => {
  const value = tests[i   % tests.length];
  document.querySelector('select').value = value;
  document.querySelector('p').textContent = `Programatically set ´${value}´ (type: ${typeof value})`;
}, 2000);  
 <select>
  <option>-</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option>Three</option>
</select>

<p></p>