Блог

Есть ли какие-либо примеры, которые позволят мне удалить параметры из выпадающего списка с помощью JavaScript?

Вот код:

 <select autocomplete="off" id="sSec1" tabindex="0" name="sSec1" class="isSelected styled security selectOriginal">
      <option id="" value="">Select</option>
      <option id="o1" value="What is the name of your first pet?">What is the name of your first pet?</option>
      <option id="o2" value="What is your favorite food?">What is your favorite food?</option>
      <option id="o3" value="What is your favorite holiday?">What is your favorite holiday?</option>
      <option id="o4" value="What is your favorite movie?">What is your favorite movie?</option>
      <option id="o5" value="What is your favorite sport?">What is your favorite sport?</option>
      <option id="o6" value="In what city were you born?">In what city were you born?</option>
      <option id="o7" value="What is your mother's maiden name?">What is your mother's maiden name?</option>
    </select>
  

Вот список 2:

 <select autocomplete="off" id="sSec2" tabindex="0" name="sSec2" class="isSelected security styled">    
      <option id="" value="">Select Second Question</option>
      <option id="o1s2" value="What is the name of your first pet?">What is the name of your first pet?</option>
      <option id="o2s2" value="What is your favorite food?">What is your favorite food?</option>
      <option id="o3s2" value="What is your favorite holiday?">What is your favorite holiday?</option>
      <option id="o4s2" value="What is your favorite movie?">What is your favorite movie?</option>
      <option id="o5s2" value="What is your favorite sport?">What is your favorite sport?</option>
      <option id="o6s2" value="In what city were you born?">In what city were you born?</option>
      <option id="o7s2" value="What is your mother's maiden name?">What is your mother's maiden name?</option>
    </select> 
  

Теперь я хочу, чтобы это произошло, когда для контрольного вопроса № 1 выбран любой параметр. Этот параметр не должен присутствовать для контрольного вопроса № 2.

Вы можете удалить параметр, установив для него значение null.

 document.getElementById("sSec1").options[0] = null;
  

Редактировать:

Вот рабочий пример: http://jsfiddle.net/c5wFn /

 document.getElementById("sSec1").addEventListener("change", 
    function(select)
    {
        if (this.value != "")
        {
            var select2 = document.getElementById("sSec2");
            for (var i = 0; i < select2.options.length; i  )
            {
                if (this.value == select2.options[i].value)
                {
                    select2.options[i] = null;
                    break;
                }
            }
        }
    }, false);
  

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

Также не уверен, используете ли вы jquery или нет, поэтому я работал с простым старым javascript. Но регистрация события должна быть проверена на совместимость, поскольку это не будет работать на всех.