CODEWITHSUNDEEP
javascriptjquery
Gtopuria
Gtopuria

Reputation: 427

selecting incorrect value HTML <select>

I have HTML:

 <select class="form" id="select" name="select">
            <option>number1</option>
            <option>number2</option>
    </select>

 <select name="organisation" class="form" id="cent" required>
            <option value="1">UK</option>
            <option value="2">SPAIN</option>
</select>

And another <select>:

 <select class="form" id="ssip" name="organisation">
    <option value="47" >US</option>
   <option value="48">UKRAINE</option>
</select>

JQuery to show on 1 - first select on 2 - second

$(document).ready(function() {
    $("#select").each(function () {
        if (this.value == "1") {
            $('#cent').show();
            $('#ssip').hide();
        }
        if (this.value == "2") {
            $('#cent').hide();
            $('#ssip').show();
        }
    });
});

The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..

Upvotes: 1

Views: 816

Answers (3)

Hardy
Hardy

Reputation: 5631

You are trying to loop one select box..

$("#select").each(function () {

There can be only one element with id "select". You should check like:

if ($("#select").value() == "1") { ..

And you don't even have values in your first select options..

Upvotes: 2

Nathaniel Currier
Nathaniel Currier

Reputation: 344

i might suggest something like this

$('#select').on('change', function() {

   var selected = this.selectedIndex;

   $('.orgs').hide();

   switch(selected) {
        case 1:
            $('#ssip').show();
            break;
        case 2: 
            $('#cent').show();
            break;
    }
});

here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.

$(document).ready(function() {
    $("select").change(function () {
        if (this.value == "number1") {
            $('#cent').show().prop("disabled", false);
            $('#ssip').hide().prop("disabled", true);
        }
        if (this.value == "number2") {
            $('#cent').hide().prop("disabled", true);
            $('#ssip').show().prop("disabled", false);
        }
    });
});

JS Fiddle: http://jsfiddle.net/bTJsH/

Upvotes: 2

Related Questions