将多个<select>映射到</select> <input />

时间:2016-05-10 13:19:03

标签: javascript jquery html loops

看起来似乎应该有一个更好的方法来做到这一点而不将脚本粘贴到我的页面,但我对js不是很好,我真的可以使用一些指向正确的方向。工作&#39;代码如下。

var select;
var i;
select = ['division', 'account_exec', 'badge_printing', 'attendance_tracking', 'lead_retrieval','access_control', 'general_session', 'breakout_rooms', 'exhibit_floor'];
for (i = 0; i < select.length; ++i) {
    $( "<script>$(function(){$('select[name=" + select[i] + "]').change(function(){var selected=$(this).val();$('input[name=input_" + select[i] + "]').val(selected);});});<\/script>" ).appendTo("body");
}

2 个答案:

答案 0 :(得分:1)

我不同意这种方法。你应该做的是实际将这些名称添加到HTML元素而不是数组。如果名称改变会发生什么?更容易在HTML而不是JS中保留名称和ID等 - 以提高可读性并减少错误

您可以将“ID”分配给data-name属性(或任何您想要的属性)。

示例:

<div id="someID">
    <select data-name="division">
           <option value="something">Text1</option>
           .....
    </select>
    <input data-name="division" value="" />
    ....
    ....
</div>

现在您使用on事件 - 这样做的目的是仅为ID分配一个事件,并告诉它“观察”changed事件的选择。

$('#someID').on('change','select', function() {
     var $this = $(this),
         name = $this.data('name'),
         $input = $('#someID').find('input[data-name="' + name + '"]"');

    $input.val($this.val());
});

答案 1 :(得分:-1)

您的代码看起来应该是这样的......

$(function(){

    var select = [
        'division',
        'account_exec',
        'badge_printing',
        'attendance_tracking',
        'lead_retrieval',
        'access_control',
        'general_session',
        'breakout_rooms',
        'exhibit_floor'
    ];

    for (var i = 0; i < select.length; ++i) {

        $('select[name="' + select[i] + '"]').on('change', function(){

            $('input[name="input_' + select[i] + '"]').val($(this).val());

        });

    };

});
  • 您应该在分配变量时声明变量。
  • 我不确定为什么ready函数在循环中,但这通常包含所有代码。
  • 我不确定你的身体是什么,所以我把它留了出来。
  • 我不知道$(this).val()是否具有您期望的价值,但您可以对其进行测试。
  • 您没有正确的引号,因此您的变量是字符串的一部分。