Блог

У меня есть несколько меню выбора на странице: я передаю выбранное значение скрытому типу ввода с помощью jQuery. Всего у меня 4, но есть ли способ, которым я мог бы просто использовать функцию on, которая нацелена на используемое меню выбора и передает значение соответствующим образом. Я использовал тот же «формат» для идентификаторов и переменных, поэтому я считаю, что это можно сделать. Спасибо.

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

 jq('#stateSelect').change(function() {
    var myState = jq(this).val();
    jq('#stateChosen').val(myState);
    console.log(myState);
  });

  jq('#countySelect').change(function() {
    var myCounty = jq(this).val();
    jq('#countyChosen').val(myCounty);
    console.log(myCounty);
  });

  jq('#genderSelect').change(function() {
    var myGender = jq(this).val();
    jq('#genderChosen').val(myGender);
    console.log(myGender);
  });

  jq('#whoamiSelect').change(function() {
    var myWhoami = jq(this).val();
    jq('#whoamiChosen').val(myWhoami);
    console.log(myGender);
  });
  

Использовать .data()

• Применить общий класс для выбора элементов как commonSelect
• Примените другой флаг данных, такой же, как идентификатор скрытых входов.

Пример кода

 $('.commonSelect').change(function() {
    var hiddenId = $(this).data('flag');
    $('#' hiddenId).val($(this).val());
});
  

 $('.commonSelect').change(function() {
    var hiddenId = $(this).data('flag');
    $('#' hiddenId).val($(this).val());
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-flag="asdf" class="commonSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="asdf" />
<br/>
<select data-flag="qwerty" class="commonSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="qwerty" />  

Вы могли бы создать общую функцию, но вам может потребоваться также адаптировать свой html.

Пример HTML:

 <select class="jqSelect" id="state">...</select>
<input type="text" name="stateChosen" id="stateChosen" value="" />
  

И сценарий:

   jq('.jqSelect').change(function() {
    var myValue = jq(this).val();
    var myId = jq(this).attr('id');
    jq('#' myId 'Chosen').val(myValue);
  });
  

Чтобы уточнить, вы хотите использовать одну и ту же функцию Jquery для получения данных из различных полей выбора, правильно? Если это так, я бы дал всем селекторам класс (‘Вы также можете использовать селекторы ввода)

Итак, если вы присвоите всем флажкам класс селектора и сохраните свой идентификатор, чтобы вы знали, что выбрано

Вы могли бы сделать что-то вроде

  $('.selector).on('change, function(){
    active_selector = $(this).attr('id')
    value = $(this).val() 

  });
  

Вы можете использовать цикл for, атрибуты данных, структуру html или множество других опций.

Для цикла не лучшее решение, но работает

 ["a","b"].forEach( function(val){ 
    $("#"   val   "Select").on("change", function() {     
       $("#"   val   "Chosen").val($(this).val()); 
    }).trigger("change");  
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="aSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="aChosen" />
<br/>
<select id="bSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="bChosen" />  

Атрибут данных — лучшее решение, поскольку он использует жестко закодированную ссылку, которая не изменится.

 $("select[data-for]").on("change", function() {
    var sel = $(this);
    var txt = sel.data("for");
    $(txt).val(sel.val());
}).trigger("change");  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-for="#asdf">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="asdf" />
<br/>
<select data-for="#qwerty">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="qwerty" />  

Структура HTML Я понятия не имею, какова ваша структура, но вы могли бы просто использовать связь с выбором. Этот способ не очень хорош, поскольку он сломается, если ваша структура html изменится.

 $("select").on("change", function() {
    var sel = $(this);
    sel.next("input").val(sel.val());
}).trigger("change");  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="asdf" />
<br/>
<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="qwerty" />  

Разобрать идентификатор Вы можете легко удалить «Выбрать» из строки и заменить его на «Выбранный», чтобы создать свой селектор для выбора текстового поля.

 $("select[id$='Select']").on("change", function(){
   var sel = $(this);
   var prefix = this.id.replace(/Select$/,"");
   $("#"   prefix   "Chosen").val(sel.val());
}).trigger("change");  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="aSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="aChosen" />
<br/>
<select id="bSelect">
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
</select>
<input id="bChosen" />  

Как я уже говорил, есть множество способов сделать это, и я уверен, что их еще много.