映射多個 <select>至<input>

Question

似乎確實應該有一種更好的方法，而不是將腳本粘貼到我的頁面上，但是我對js不太滿意，我真的可以使用一些指向正確方向的指針。 “有效”代碼如下。

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

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

Answer 2

您的代碼應如下所示：

$(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()是否具有您期望的值，但是您可以對其進行測試。
• 您沒有正確的引號，因此您的變量是字符串的一部分。