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=".10.3/themes/smoothness/jquery-ui.css">
<script src=".9.1.js"></script>
<script src=".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>
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./ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./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>
5 Answers
Reset to default 8<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);
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
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">
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.
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/UGpZH/13/
The problem is that you are selecting the wrong drop-down.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742255900a4410014.html
评论列表（0条）