Отключить / удалить параметр выбора на основе другого значения атрибута данных параметра выбора

Я хочу показать параметры из # cities2, если значение параметра #cities совпадает со значением атрибута данных #city2.

Например, если при первом выборе выбрано Майами, то во втором поле выбора отображается только Майами и удаляются или отключаются все другие параметры из # cities2.

Вот мой код, который я пытаюсь:

<select name="cities" id="cities">
    <option value="Los Angeles">Los Angeles</option>
    <option value="Miami">Miami</option>
    <option value="Las Vegas">Las Vegas</option>
    <option value="Chicago">Chicago</option>
</select>

<select name="cities2" id="cities2">
    <option data-cities="Los Angeles">Los Angeles</option>
    <option data-cities="Miami">Miami</option>
    <option data-cities="Las Vegas">Las Vegas</option>
    <option data-cities="Chicago">Chicago</option>
</select>

<script>
 $('#cities').change(function(e){
    var $option = $('#cities2 option').data('cities');
    if($(this).val() == "Miami" && $option == "Miami" ){
       $("#cities2 option").prop('disabled',true);           
       $("#cities2 option[data-cities='Miami']").prop('disabled',false);

    }else {
       $("#cities2 option").prop('disabled',false);
    };
 });
</script>

Заранее благодарю за любую помощь.

Вы получаете ошибку консоли?

Shahzad 10.09.2018 10:19

@Shahzad нет, я не получаю никаких консольных ошибок.

Sajjad Ahmad 10.09.2018 10:21

@TheFool Не могли бы вы дать мне ссылку jsfiiddle, чтобы я мог видеть. Спасибо

Sajjad Ahmad 10.09.2018 10:22
1
3
43
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте этот код:

$('#cities').change(function(e){
    var $option = $('#cities2 option');
    var $selectedValue = $('#cities option:selected').val();

    $.each($option, function(inedx, option){
        var disabled = $selectedValue !== $(option).val();
      $(option).prop('disabled', disabled);
    });
 });

Также вот рабочий пример Демо

Ответ принят как подходящий

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="cities" id="cities">
    <option value="Los Angeles">Los Angeles</option>
    <option value="Miami">Miami</option>
    <option value="Las Vegas">Las Vegas</option>
    <option value="Chicago">Chicago</option>
</select>

<select name="cities2" id="cities2">
    <option data-cities="Los Angeles">Los Angeles</option>
    <option data-cities="Miami">Miami</option>
    <option data-cities="Las Vegas">Las Vegas</option>
    <option data-cities="Chicago">Chicago</option>
</select>

<script>
  $('#cities').change(function(e){
    var option = $(this).val();
    console.log("Selected first: " + option);
    
    if ($(this).val() == "Miami" && option == "Miami") {
      console.log("This is Miami");
      $("#cities2 option").prop('disabled',true);           
      $("#cities2 option[data-cities='Miami']").prop('disabled', false);
      $("#cities2 option[data-cities='Miami']").prop('selected',true); 
    } else {
      console.log("Not Miami");
      $("#cities2 option").prop('disabled', false);
    };
  });
</script>

У вас ошибка при запуске javascript. Это рабочее решение (не универсальное, как ваш пример)

Другие вопросы по теме