CODEWITHSUNDEEP
javascriptjqueryhtml
Scooter Daraf
Scooter Daraf

Reputation: 535

two select options in javascript

i have two select options but i found little complication between them in the javascript. here is my javascript code :

  function displayVals() {
     var singleValues = $("select option:selected").text(); //to stay slected
    $("#hiddenselect").val(singleValues);                   //hidden field of second select option
    $("samp").html("" + singleValues);             // this to insert text between samp tags
  $("select > option:first").prop("disabled", "disabled") // this to disable first option
  }

  $(document).ready(function(){
    $("select").change(function() {
        displayVals();
    });
    displayVals();

    $("select#menucompare").change(function() {
        $("#aform").submit();                   // second select options to submit

    });
      $("select#infmenu").change(function() {
        $("#infform").submit();                 // first select options to submit 

    });        
});

now what i expect is : - only the first select options ( the first option is disabled), need the second select option also (the first option be disabled)

here is my html code my first select option :

    <form action="" id="infform" method="post">
        <select id="infmenu" name ="infmenu" size="1" class="select" onchange="submitinfform()" >
       <option value="0" >Please Select your country</option>
        <option value="<?php echo $row9['id'] ;?>" <?php if ($_SESSION['infmenu'] == $row9['id']) { echo " selected='selected'"; } ?> ><?php echo $row9['name'] ;?></option><?php  } ?>
      </select>
     <input type="hidden" name="hiddenselect" value="<?php echo $infmenu;  ?>" />
   </form>

this the second select options

    <form id="aform" method="post">
     <select id="menucompare" name ="menucompare" size="1" class="select" onchange="submitaform()">
         <option value="0">Select one</option>
         <option value="west" <?php if ($menucompare == "west") { echo " selected='selected'"; } ?> >West</option>
         <option value="est" <?php   if ($menucompare == "est") { echo " selected='selected'"; } ?> >Est</option>

    </select>
         <input type="hidden" name="hiddenselect" value="<?php echo $menucompare ;  ?>" />  

</form>

i have spent on this many days no luck thanks for your time

Upvotes: 1

Views: 1928

Answers (3)

closure
closure

Reputation: 7452

Not able to understand you code well. Here is little help for you to try:

To get selected value (value attribute) of the first select element use:

$("#infmenu").val();

To get selected value (value attribute) of the first select element use:

$("#menucompare").val();

To disable first option in first select called "infmenu":

$("option", "#infmenu").first().attr("disabled", "disabled");

To disable first option in second select called "infmenu":

$("option", "#menucompare").first().attr("disabled", "disabled");

To get displayed text of the first select element use:

$("option:selected", "#infmenu").text();

To get displayed text of the second select element use:

$("option:selected", "#menucompare").text();

Upvotes: 2

Dariush Jafari
Dariush Jafari

Reputation: 5443

You want to choose the second select tag. so you have to change your jquery selector in line 2:

var singleValues = $("select:nth-child(2) option:selected").text();

Upvotes: 1

Travesty3
Travesty3

Reputation: 14469

The jQuery selector that you're using is $("select option:selected"). This means "find all <option> tags that are selected and are children of a <select> element."

You have two <select> elements, so your selector is matching both of them. If you want to match a specific one, you'll need to refine your selector. Since you already have an ID attribute on the second one, try using $("#menucompare option:selected").

Change:

var singleValues = $("select option:selected").text(); //to stay slected

To:

var singleValues = $("#menucompare option:selected").text(); //to stay slected

Upvotes: 1

Related Questions