Question

我想将下拉选择框的值返回到文本输入中。目前，我只能使用下拉选项修改第一个文本框。请参阅下面的JSFiddle上的工作示例。

HTML ::

    <select id="select1">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input type="text" id="remap" name="out[]" />
<br />
<select id="select1">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input type="text" id="remap" name="out[]" />

JQuery的::

$(document).ready(function(){ $(function(){ $('select[id^=dropdown_]:not(.ui-dropdown_)').live('change', function(){ var Data = $(this).val(); $('#remap_value').val(Data); }) }); });

示例：JS Fiddle

Answer 1

您可以使用.next()选择正确的输入。

$(document).ready(function(){
$(function(){
    $('select[id^=dropdown_]:not(.ui-dropdown_)').live('change', function(){
        $(this).next('.remap_value').val($(this).val());
    })
  });
});

编辑：您应该使用class而不是ID来表示remap_value，因为具有相同ID的多个元素无效。我的答案也因效率而更新。

<input type="text" class="remap_value" name="out[]" />

Answer 2

您的HTML无效，即使在您的jsFiddle中也是如此。您的input的ID不是唯一的。

但为了使其有效，我首先将input的ID更改为唯一，并为每个select分类：

<select name="select" id="dropdown_1" class="Dropdown">
    ...
</select>
<input type="text" id="remap_value1" name="out[]" />
<br />
<select name="select" id="dropdown_2" class="Dropdown">
    ...
</select>
<input type="text" id="remap_value2" name="out[]" />

这将使jQuery中的选择器比您目前拥有的基于CSS的复杂选择器更有效。

然后我将jQuery修改为超高效：

$(function(){
    $('.Dropdown').on('change', function(){
        $(this).next().val($(this).val());
    })
});

快速解释jQuery的更改：

您对jQuery进行了双重封装，$(function(){是$(document).ready({function(){的缩写
我使用.on()代替.live()，因为现在已弃用
我访问了我创建的类Dropdown以绑定change事件
我使用.next()转到DOM树的同一级别上的下一个HTML元素作为更改的选择项
我在插入新文本值时使用了$(this).val()，避免了不必要的变量缓存

正如您所看到的，使用此方法您甚至不需要为后面的输入设置ID，除非您出于其他目的访问它们。

如果您担心与其他下拉列表发生冲突，可以轻松地将.not()合并到选择器中：

$(function(){
    $('.Dropdown').not('.ui-dropdown_').on('change', function(){
        $(this).next().val($(this).val());
    })
});

根据jQuery documentation，这实际上是not的首选用途，而不是CSS用法。

jsFiddle to show changes and working example

从多个下拉菜单中返回文本值

2 个答案: