Question

我在页面上有一些选择菜单：我使用jQuery将选定的值传递给隐藏的输入类型。我总共有4个，但有一种方法我可以在功能上使用，目标是使用的选择菜单并相应地传递值。我对ID和vars使用了相同的'格式'，所以我认为它可以完成。感谢。

以下只是我目前使用的一小部分内容。它按预期工作，但肯定必须有一种方法只使用一个函数？

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);
  });

Answer 1

使用 .data()

应用公共类选择元素commonSelect
应用与隐藏输入ID相同的不同数据标记。

代码示例

$('.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" />

Answer 2

您可以构建一个通用函数，但您可能还需要调整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);
  });

Answer 3

为了澄清，你想使用相同的Jquery函数从各种选择框中获取数据，对吗？如果是这样，我会给所有选择器一个类（'你也可以使用输入选择器）

因此，如果您为所有复选框提供一个选择器类，并保留您的ID以便您知道所选内容

您可以执行类似

的操作

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

  });

Answer 4

您可以使用for循环，数据属性，html结构或无数其他选项。

For Loop 不是最佳解决方案，但有效

＆＃13;

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

＆＃13;

<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" />

＆＃13;

数据属性 一个更好的解决方案，因为它使用了不会改变的硬编码引用。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

HTML结构 我不知道你的结构是什么，但你可以选择使用一种关系。这种方式并不好，因为如果您的html结构发生变化，它会破坏。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

解析ID 您可以轻松地去除＆＃34;选择＆＃34;关闭字符串并将其替换为＆＃34;选择＆＃34;构建选择器以选择文本框。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

正如我所说，有很多方法可以做到，我相信还有更多。

删除jQuery中的重复？

4 个答案: