1

我想将下拉选择框的值返回到文本输入中。目前，我只能修改带有下拉选择的第一个文本框。请参阅下面 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 小提琴

4

2 回答 2

1

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

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

编辑：对于 remap_value，您应该使用类而不是 ID，因为具有相同 ID 的多个元素是无效的。为了提高效率，我的答案也已更新。

<input type="text" class="remap_value" name="out[]" />
于 2013-05-22T21:54:28.530 回答
1

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

但是为了让它工作，首先我将inputs 的 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 的变化：

  1. 你是双重封装你的jQuery，$(function(){是简写$(document).ready({function(){

  2. 我使用了.on()而不是.live()，因为 live 已被弃用

  3. 我访问了Dropdown我创建的类来绑定change事件

  4. 我曾经.next()在 DOM 树的同一级别上转到与更改的选择项相同的下一个 HTML 元素

  5. 我$(this).val()在插入新文本值时使用，避免了不需要的变量缓存

如您所见，使用这种方法，您甚至不需要为后面的输入提供 ID，除非您出于其他目的访问它们。

如果您担心与另一个下拉列表冲突，您可以轻松地合并.not()到选择器中：

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

根据jQuery 文档，这实际上是not替代 CSS 用法的首选用法。

jsFiddle 显示更改和工作示例

于 2013-05-22T21:55:30.270 回答