Javascript 如何获取输入值并将其放入div？

我正在为样式选择框编写简单的jquery插件

我想将每个“选择>选项”项中的文本数据复制到我自己的块中。但使用此脚本，来自所有项的所有文本值都将复制到每个块中，而不是单独复制。怎么了？我希望你能理解我

$.fn.imSbox = function(){
    var parent;
    parent = this.parent();
    $('select', parent).wrap('<div class="im-sbox"></div>');
    $('.im-sbox', parent).append('<div class="im-sbox-select"></div>');
    for ( var i = 0; i < $('select > option', parent).length; i++ ) {
        $('.im-sbox-select', parent).append('<div class="im-sbox-option">'+$('select > option', parent).eq(i).text()+'</div>')
    }
}

$('.popup__form-select_to').imSbox();
$('.popup__form-select_game').imSbox();
$('.popup__form-select_problem').imSbox();
$('.popup__form-select_platform').imSbox();

HTML:

---

我相信这就是您想要的，例如：

javascript是我唯一更改的代码。变化如下：

     /*loop through each .p-area-wrap div container because
       that is where you want to append the option select values
      */
     $(".p-area-wrap").each(function(){//begin each function


    /*1. find the contents of the .popup__form-select, select list

      2. then return its html contents

      3. finally append the html contents to this .p-area-wrap
         because before all the .popup__form-select elements html was
         being added to the all of the .p-area-wrap div's.
    */
    $(this).append("<br><br>" + $(this).find(".popup__form-select").html() + "<br><br>");



  });//end each function

---

因此，代码的问题在于代码：

parent = this.parent();

包含一个具有所有3个“p-area-wrap”div的对象。因此，当你到达：

for ( var i = 0; i < $('select > option', parent).length; i++ ) {
    $('.im-sbox-select', parent).append('<div class="im-sbox-option">'+$('select > option', parent).eq(i).text()+'</div>')
}

代码将获取所有选项，这些选项是包含所有3个DIV的select元素的子元素…因此代码将所有选项放入每个“im sbox select”DIV中

以下是我的解决方案：

$.fn.imSbox = function(){
    var parent;
    parent = this.parent(); //This object contains all 3 'p-area-wrap' divs
    $('select', parent).wrap('<div class="im-sbox"></div>');
    $('.im-sbox', parent).append('<div class="im-sbox-select"></div>');

    parent.each(function(){ //Loop through each 'p-area-wrap' DIV
        var selectBox = $(this).find('.im-sbox-select'); // store the selectBox container for current 'p-area-wrap' DIV
        $(this).find('select > option').each(function(){ // loop through each 'option' in current 'p-area-wrap' DIV
            selectBox.append('<div class="im-sbox-option">'+$(this).text()+'</div>'); //append option
        });
    });
}

---

你能解释一下你为什么做这些改变吗？导致它失败的原始代码出了什么问题，以及此更改如何纠正这些错误？很抱歉，我没有对代码进行注释。希望这些变化现在更容易理解。

$.fn.imSbox = function(){
    var parent;
    parent = this.parent(); //This object contains all 3 'p-area-wrap' divs
    $('select', parent).wrap('<div class="im-sbox"></div>');
    $('.im-sbox', parent).append('<div class="im-sbox-select"></div>');

    parent.each(function(){ //Loop through each 'p-area-wrap' DIV
        var selectBox = $(this).find('.im-sbox-select'); // store the selectBox container for current 'p-area-wrap' DIV
        $(this).find('select > option').each(function(){ // loop through each 'option' in current 'p-area-wrap' DIV
            selectBox.append('<div class="im-sbox-option">'+$(this).text()+'</div>'); //append option
        });
    });
}