CODEWITHSUNDEEP
javascriptjquery
ivan
ivan

Reputation: 95

How to get input values and place them into div?

I'm writing simple jquery plugin to style selectbox.

jSfiddle

I want to copy text data from each 'select > option' items to my own block. But with this script, all text values(from all items) are copying in each block(not individually). What wrong? I hope you understand me.

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

Upvotes: 0

Views: 81

Answers (2)

zod799
zod799

Reputation: 51

So the issue with your code is that the code:

parent = this.parent();

contains an object that has all 3 'p-area-wrap' divs. So when you get to:

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>')
}

the code is grabbing all options that are children of a select element with in all 3 divs...hence the code is putting all options into each 'im-sbox-select' DIV.

Here's my solution:

$.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
        });
    });
}

Upvotes: 1

Larry Lane
Larry Lane

Reputation: 2191

I believe this is what you are looking for, jsfiddle example: http://jsfiddle.net/larryjoelane/g7v0ts04/18/

The javascript is the only code I changed. The changes are below:

     /*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

Upvotes: 0

Related Questions