Блог

Главная - Вопросы по программированию - Как добавить атрибут для выбора опции с помощью javascript, jquery или css?

Как добавить атрибут для выбора опции с помощью javascript, jquery или css?

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

У меня есть некоторый HTML, который генерируется автоматически, поэтому я не могу изменить его в html напрямую. Но в основном это:

     <select name="field2" id="id_18_gen" >
        <option value="{1,2}" >Please choose...</option>
        <option value="1" >correct</option>
        <option value="2" >false</option>
    </select>

Теперь я хотел бы добавить скрытый и отключенный атрибут к первому варианту:

     <option value="{1,2}" hidden disabled >Please choose...</option>

Я пробовал несколько вещей, например:

     let e = document.getElementById(element);
    e.options["{1,2}"].hidden ="true";

или

     $("#"  element  "option[value="   "{1,2}"   "]").hide();

Но ничего не сработало. Решение на javascript или Jquery было бы отличным, но css тоже подойдет.

Ответ №1:

проверьте, работает ли приведенный ниже код

 let e = document.getElementbyId('id_18_gen').firstElementChild;
e.disabled = true;
e.style.visibility = 'hidden';

Ответ №2:

Используйте метод setAttribute().

 firstop.setAttribute("hidden",""); 
firstop.setAttribute("disabled","");
  

 var firstop = document.querySelector("#id_18_gen option:first-child");
firstop.setAttribute("hidden",""); 
firstop.setAttribute("disabled","");   
  <select name="field2" id="id_18_gen" >
     <option value="{1,2}" >Please choose...</option>
     <option value="1" >correct</option>
     <option value="2" >false</option>
 </select>

Ответ №3:

e.setAttribute(‘атрибут’, значение). Чтобы выбрать конкретную опцию, это e.options[index] или e.options.item(index) (то же самое) или по ширине идентификатора e.options.namedItem(id).setAttribute(….)

Чтобы найти конкретный параметр по значению:

 e.options.map((option, index) => {
 if (option.value == '{1,2}')
  option.setAttribute('hidden', true);
})

или лучше с queryselector:

 document.querySelector('#id_18_gen option[value={1,2}]')

Ответ №4:

В jQuery вы можете использовать:

 $('#id_18_gen option').first().attr({"hidden":"","disabled":""});
  

 $(function() {
    const firstOpt = $('#id_18_gen option').first();
    console.log( "Before:", firstOpt[0] );
    firstOpt.attr({"hidden":"","disabled":""});
    console.log( "After:", firstOpt[0] );
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="field2" id="id_18_gen" >
   <option value="{1,2}" >Please choose...</option>
   <option value="1" >correct</option>
   <option value="2" >false</option>
</select>