Question

我正在将简单的jquery插件写入样式选择框。

我想复制每个＆＃39;选择＆gt;的文字数据选项＆＃39;项目到我自己的块。但是使用此脚本，所有文本值（来自所有项目）都在每个块中复制（不是单独）。怎么了？我希望你理解我。

$.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：

<form class="popup__form">
            <div class="p-area-wrap">
              <select name="contact-select" class="popup__form-select popup__form-select_game">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
              </select>
            </div>
            <div class="p-area-wrap">
              <select name="contact-select" class="popup__form-select popup__form-select_game">
                <option value="val-1">Value 1</option>
                <option value="val-2">Value 2</option>
                <option value="val-3">Value 3</option>
              </select>
            </div>
            <div class="p-area-wrap">
              <select name="contact-select" class="popup__form-select popup__form-select_game">
                <option value="android">Android</option>
                <option value="ios">iOs</option>
                <option value="windows-phone">Windows Phone</option>
              </select>
            </div>
            <button type="submit" class="popup__form-submit">Submit a request</button>
          </form>

Answer 1

所以你的代码的问题是代码：

parent = this.parent();

包含一个具有全部3＆p-area-wrap＆＃39;的对象。 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中抓取所有选项元素的子选项...因此代码将所有选项放入每个＆＃39; im-sbox-select＆＃39; 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
        });
    });
}

Answer 2

我相信这就是你要找的东西，例如：http://jsfiddle.net/larryjoelane/g7v0ts04/18/

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

如何获取输入值并将它们放入div？

2 个答案: