Как установить выбранную опцию на основе значений переключателей с помощью jQuery

Question

Я вижу, что много раз подобные вопросы задавались, однако мой вопрос имеет небольшую разницу.

У меня есть:

1. пакет радио-кнопок, каждый из которых имеет 2 значения

2. 1 выберите с опциями. И на основе выбранных значений радио будет выбран желаемый ВАРИАНТ.

Я буду очень рад и благодарен вам, ребята, если вы можете помочь мне с этим.

Сейчас я сталкиваюсь с проблемой, как заставить jQuery не только реагировать на функцию изменения переключателя, но и получить значение в случае, если оно уже было загружено взломанным ...

Сначала я проигнорировал бы поле с номером, и вернулся бы, если после того, как выясню с радио ...

Так, например, я хочу:

, если custom_field_7 равен женский И custom_field_1 равен 0

make SELECT.custom_field_user_role опция рекомендация3 выбрано

Это FIDDLE Я работаю с

HTML КОД:

<ul>
  <!-- 1 -->
  <li id="wppb-form-element-23">
    <label for="custom_field_7">Your sex:</label>
      <ul class="wppb-radios">
        <li>
          <input value="female" id="female_23" name="custom_field_7" type="radio" required="" checked="">
          <label for="female_23">Female</label>
        </li>
        <li>
          <input value="male" id="male_23" name="custom_field_7" type="radio" required="">
            <label for="male_23">Male</label>
          </li>
      </ul>
   </li>


  <!-- 2 -->
   <li id="wppb-form-element-25">
                <label for="custom_field_9">Yout age:</label>
                <input name="custom_field_9" type="number" id="custom_field_9" value="12" required="">
   </li>
   <!-- 3 -->
   <li id="wppb-form-element-18">
     <label for="custom_field_1">Have you suffered?</label>
       <ul>
         <li>
           <input value="1" id="1_18" name="custom_field_1" type="radio" required="">
           <label for="1_18">Yes</label>
         </li>
         <li>
           <input value="0" id="0_18" name="custom_field_1" type="radio" required="">
           <label for="0_18">No</label>
         </li>
       </ul>
   </li>
<!-- select -->
       <li id="wppb-form-element-27">
                    <label for="custom_field_user_role">Select role:</label>
                    <select name="custom_field_user_role" id="" class="custom_field_user_role " required="">
              <option value="recommandation1" selected="selected">recommandation 1</option>
              <option value="recommandation2">recommandation 2</option>
              <option value="recommandation3">recommandation 3</option>
            </select>
       </li>
    </ul>

jQuery:

$(function(){
        $('input[name = custom_field_7]').change(function() {
                if($('input[name = custom_field_7]').attr('checked') == "checked") { 
            //alert ((this.value));

          if ((this.value) == 'male' ) {
            $('.custom_field_user_role option:eq(2)').attr('selected','selected');
          } else if ((this.value) == 'female' ) {
            $('.custom_field_user_role option:eq(0)').attr('selected','selected');
          }
        }
        });
});


/*
$(function() { 
$('input[name=custom_field_7]').change(function() { 
             var up_sex = (this.value);

          return (up_sex);
          });

    if (!$("input[name='custom_field_7']:checked").val()) {
        $('input[name=custom_field_7]').change(function() { 
             var up_sex = (this.value);

          alert (up_sex);
          });
    } else {
     var up_sex = $("input[name='custom_field_7']:checked").val();

     alert (up_sex);
    }
});
    */

Answer 1

Похоже, вы пытались что-то немного странно. Я подозреваю, что проблема была связана с неоднозначным селектором: $('input[name = custom_field_7]') Это будет больше чем 1 элемент.

$(function() {
  $("input[name='custom_field_7']").change(function(e) {
    console.log("input[name='custom_field_7'] - Event: " + e.type);
    $("input[name='custom_field_7']").each(function(i, el) {
      if ($(el).is(":checked") && $(el).val() == 'male') {
        $('.custom_field_user_role > option:eq(2)').prop('selected', true);
        console.log(".custom_field_user_role opt(2) selected");
      }
      if ($(el).is(":checked") && $(el).val() == 'female') {
        $('.custom_field_user_role > option:eq(0)').prop('selected', true);
        console.log(".custom_field_user_role opt(0) selected");
      }
    });
  });
});

Рабочий пример: https://jsfiddle.net/Twisty/4ax1j8tq/14/

Возможно, вы захотите использовать более конкретный c селектор в вашем операторе if: $("input[name='custom_field_7']:checked").val() == 'male'

Для опций вы можете попробовать использовать .attr(), но рекомендуется .prop(). .prop () против .attr ()