CODEWITHSUNDEEP
javascriptjqueryhtml
Praful Bagai
Praful Bagai

Reputation: 17412

Get the id of the selected option

I've 2 dialog forms Add region and Add country. There are <select> options in each modal form. There can be select options which are repeated in each modal form, so I'm putting those in a class and styling it by display:none, so the id's does not get repeated.

When I need to get the id of the item selected, it gives me an undefined value. I'm using $(".region_options").children(":selected").attr("id"); to get the id of the selected option.

Here is my code. and jsFiddle

<!doctype html>
<html lang="en">
<head>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>
  $(function() {

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {
          var region_id =  $(".region_options").children(":selected").attr("id");
          alert(region_id)
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },

    });

    $( "#create-user" ).button().click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });


  </script>
</head>
<body>

<div id="dialog-form" title="Create new user">
    <select class="region_options">
        <option>Select Region</option>
        <option id="1">Asia / Pacific</option>
        <option id="2">North America</option>
        <option id="3">sdgvgwqrg</option>
    </select>
</div>

<div id="dialog-form1" title="Create new user" style="display:none">
   <select class="region_options">
        <option>Select Region</option>
        <option id="1">Asia / Pacific</option>
        <option id="2">North America</option>
        <option id="3">sdgvgwqrg</option>
    </select>
</div>


<button id="create-user">Create new user</button>


</body>
</html>

Upvotes: 3

Views: 4075

Answers (5)

Krasimir
Krasimir

Reputation: 13549

You don't have to change your markup or use the .val function. You are able to get the ids like that:

$(function() {

  $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
      "Create an account": function() {
          var region_id = $(this).find(".region_options option:selected").attr("id");
          alert(region_id);
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },

  });

  $( "#create-user" ).button().click(function() {
      $( "#dialog-form" ).dialog( "open" );
    });
});

Here is your jsfiddle updated:

http://jsfiddle.net/UGpZH/13/

The problem is that you are selecting the wrong drop-down.

Upvotes: 0

Stefan
Stefan

Reputation: 5662

As this refers to the modal (your #dialog-form element) we are able to select the select element within it rather than all of them.

$(function() {

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {

          var region_id = $(this).find(".region_options").val(); // Solution

          if (!region_id)
            alert('Please select a region.');
          else
            alert('Selected region: ' + region_id);
        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        }
      }
    });

    $( "#create-user" ).button().click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });

  });

See val and find.

Upvotes: 0

shams
shams

Reputation: 124

It will work with the id I have have worked on your js fiddle the javascript code 

`$(function() {

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {
          var region_id =  $("#select_region").val();
          alert(region_id);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },

    });

    $( "#create-user" ).button().click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });`

and the html code will be :

<div id="dialog-form" title="Create new user">
    <select id="select_region" class="region_options">
        <option>Select Region</option>
        <option value="1">Asia / Pacific</option>
        <option value="2">North America</option>
        <option value="3">sdgvgwqrg</option>
    </select>
</div>

<div id="dialog-form1" title="Create new user" style="display:none">
   <select class="region_options">
        <option>Select Region</option>
        <option value="1">Asia / Pacific</option>
        <option value="2">North America</option>
        <option value="3">sdgvgwqrg</option>
    </select>
</div>


<button id="create-user">Create new user</button>

use id as an attribute in spite of using class <select id="select_region" class="region_options">

Upvotes: 0

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15706

You need to change the line you are using from:

$(".region_options").children(":selected").attr("id");

to:

$(".region_options").children(":selected").parent().parent().attr("id")

Updated Fiddle

Upvotes: 0

Knaģis
Knaģis

Reputation: 21505

<option> elements are identified by the value attribute, not id.

<select class="region_options">
    <option>Select Region</option>
    <option value="1">Asia / Pacific</option>
    <option value="2">North America</option>
    <option value="3">sdgvgwqrg</option>
</select>

Use val() method to read or write the value of the selected option.

var region = $("#dialog-form .region_options").val();
$("#dialog-form1 .region_options").val(region);

Upvotes: 8

Related Questions