CODEWITHSUNDEEP
jquery
Rozkalns
Rozkalns

Reputation: 512

Get selected value of multiple (more than one) select boxes

Take a look on this code, what I wrote: http://pastebin.com/TZpUAWpA, and this jQuery, what is basically copy pasted from jquery docs: http://pastebin.com/Ecu0T5Kv

The problem is that, I want to make so, that every <p class="java"></p> shows selected value of previous select box.

At the moment, it works only for the bottom one, and bottom selected value applies to all <p> tags.

Upvotes: 1

Views: 1993

Answers (2)

Teun Pronk
Teun Pronk

Reputation: 1397

This does work, hope that its what you are looking for:

FIDDLE

$(document).ready(function(){
     $('.parent').each(function(){
            var theVal = $(this).find('select option:selected').html();
            $(this).find('p').html(theVal);
        });
    $('.single').change(function(){
        $('.parent').each(function(){
            var theVal = $(this).find('select option:selected').html();
            $(this).find('p').html(theVal);
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="inputArea">
    <div class="parent">
    <select class="single"><option selected value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option selected value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
   </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option selected value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option selected value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option selected value="saistitajvards">Saistītājvārds</option>
    </select><input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    
</div>

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150070

Your code:

    $(".inputArea").each(function(i){
        var singleValues = $("option:selected").val();
        $("p").html(singleValues);
    });

Has a few issues:

  • $(".inputArea").each(function(i){ says to process each element with class "inputArea", but there's only one, your container div.
  • $("option:selected") matches all option elements that are selected, but then
  • var singleValues = $("option:selected").val(); gets the value of the first option that is selected.
  • $("p").html(singleValues); sets the content of all paragraph elements.

You could try something like this instead:

$("select.single").each(function(i){
     var $this = $(this);
     $this.nextUntil("p").next().html($this.val());
});

Demo: http://jsfiddle.net/mYNXF/

Which says to process all the select elements of class "single". For each one, find the following paragraph element and set its value. Note that the .next() method selects the immediately following element or nothing, it doesn't keep searching looking for a match, while .nextUntil() searches up to but not included the first element that matches the selector. In your html structure the paragraph element doesn't immediately follow the select element, so that's why I'm using both .nextUntil("p") and .next().

Alternatively you could do something like this:

var $inputArea = $(".inputArea"),
    $selects = $inputArea.find("select.single"),
    $ps = $inputArea.find("p.java");

function displayVals() {
    for (var i = 0; i < $selects.length; i++) {
        $ps.eq(i).html($selects.eq(i).val());
    }
}

Demo: http://jsfiddle.net/mYNXF/2/

Either way works with your current html structure.

Upvotes: 0

Related Questions