onchange复制字段值从select到输入具有相同的数字

时间:2016-10-27 15:07:50

标签: javascript jquery copy

我有一堆带编号类的选择框。我有相同数量的带编号类的输入字段。每当用户添加一个选择框时,它会向上编号,并自动创建一个具有相同编号的新输入。因此,selectbox1input1作为伴侣。

现在我需要将选择的值从选择框复制到输入。我部分地工作了,但此刻它正在复制到所有输入。

以下是代码:

(function ($) {
  $(document).ready(function() {
    $(".selectArea").each(function(i) {
      $(this).addClass("selectBox" + (i+1));
    });
    var values = $("input[id^='jform_params__characters__characters'][id$='__character_name']").map( function(){return $(this).val(); }).get();
    var optionsPlaceholder = '###OPTIONS###';
    var optionPlaceholder = '###OPTION###';
    var select = '<select class="selectInput">' + optionsPlaceholder + '</select>';
    var option = '<option>' + optionPlaceholder + '</option>';
    var options = '';
    for (var i = 0; i < values.length; i++) {
        var currentOption = option.replace(optionPlaceholder, values[i]);
        options += currentOption;
    }
    var selectBox = select.replace(optionsPlaceholder, options);
    var $select = $(selectBox);
    $(".selectBox").html($select);
    $(".selectInput").each(function(i) {
      $(this).addClass("selectInput" + (i+1));
    });
    $("input[id^='jform_params__storymaker__storymaker'][id$='__characterselection_save']").each(function(i) {
      $(this).addClass("selectInputSave selectInputSave" + (i+1));
    });
  });

  $(document).on('change', '.selectInput', function() {
    alert(this.value); // or $(this).val()
    $('.selectInputSave').val($(this).val());
    //$('.selectInputSave' + (i+1)).val($(this).val());
  });
})(jQuery);

问题在于$(document).on('change'功能。 正如你在我使用

时所看到的那样
$('.selectInputSave').val($(this).val());

然后它将它复制到所有正常的输入字段,所以我要做到这一点。

$('.selectInputSave' + (i+1)).val($(this).val());

但它表示i未定义。这是真的,因为它并非如此,我尝试通过重用doc.ready函数中的部分代码来定义它。只有当我这样做时,才会发生最奇怪的行为。第一个选择框值将被复制到最后一个输入???

问题

如何实施此i+1?这样selectInput1就会被复制到selectInputSave1等等。

它需要是动态的,因为用户可以创建无限的选择框。

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我从Mamdouh Freelancer那里得到了灵感。他的评论让我考虑从选择框中获取类号,并使用该数字添加到要保存它的类中。

所以我提取了这个类&gt;替换了文本部分,留下了一个数字。 然后我将这个数字添加到我想要保存到的输入中并且它可以工作。

选择1保存到输入1

选择2保存到输入2

选择3保存到输入3

Etc Etc。

这是代码。

allow_tags