hankknight
asked on
jQuery: Select option with selected attribute
Using jQuery, how can I determine the value for a select that has the attribute "selected"?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').each(function() {
$(this).val($(this).find('option:eq('+ Math.floor((Math.random()*4)) +')').val());
});
$('select').each(function() {
alert('The selected value is ' + $(this).val() + '\n' + 'The item with the selected="selected" attribute is ???');
});
});
</script>
</head>
<body>
<div>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected="selected">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</div>
</body>
</html>
$('select').each(function( ){
if ($(this).has('[selected]') ){
alert($(this).val());
}
});
if ($(this).has('[selected]')
alert($(this).val());
}
});
This should give you what you are after (let me know if you need more info).
$('select option:selected')
e.g.
$('select option:selected')
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<div>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected="selected">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</div>
<script type="text/javascript">
$('select').on('change', function (e){
alert('selected: '+$(e.target).find("option:selected").val());
}
);
</script>
</body>
</html>
ASKER
Thank you, but none of you ideas work.
They are returning the value that is CURRENTLY selected, not the value that has the HTML attribute selected="selected".
They are returning the value that is CURRENTLY selected, not the value that has the HTML attribute selected="selected".
Please see my second post http:Q_28278790.html#a39605335 with working sample http://jsbin.com/UYOBALI/3/edit
ASKER
No, padas, your code DOES NOT meet my requirement. Test it with the code I originally posted and you will see the problem.
Your code returns the value CURRENTLY SELECTED but I want the value that has the attribute selected="selected" from the HTML.
Your code returns the value CURRENTLY SELECTED but I want the value that has the attribute selected="selected" from the HTML.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I think I understand what you mean.
Try this:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<div>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected="selected">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<input type="button" value="What is selected?" id="btnShowSelected" onclick="SelectPerHTML()">
</div>
<script type="text/javascript">
function SelectPerHTML(){
$('select option').each(function(i){
if (this.outerHTML.indexOf('selected')>0) alert('outerHTML: '+this.outerHTML+'\ninnerHTML:'+this.innerHTML);
}
)
}
</script>
</body>
</html>
ASKER
PierreC, yes, you understand what I want. But how can I integrate your solution with my code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').each(function() {
$(this).val($(this).find('option:eq(0)').val());
});
$('select').each(function() {
alert('The selected value is ' + $(this).val() + '\n' + 'The item with the selected="selected" attribute is ' + $(this).find('option').outerHTML.indexOf('selected')>0 );
});
});
</script>
</head>
<body>
<div>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="XYZ" selected="selected">XYZ</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</div>
</body>
</html>
like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
function alertSelection () {
function SelectedPerHTML() {
var s=-1;
$('select option').each(function(i){
if (this.outerHTML.indexOf('selected')>0) {s=this.innerHTML; return false;};
}
);
return s;
};
function SelectedOption() {return $('select option:selected').val();};
alert('The selected value is ' + SelectedOption() + '\n' + 'The item with the selected="selected" attribute is ' + SelectedPerHTML());
}
$(document).ready(function() { alertSelection();});
</script>
</head>
<body>
<div>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="XYZ" selected="selected">XYZ</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
<input type="button" onclick="alertSelection()" value="Alert selection info"/>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
http://jsbin.com/UYOBALI/1/edit