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>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
$(document).ready(function() {
$('select').change(function(){
  myValue=$(this,'option:selected').val();
  alert(myValue);
 }); 
});

Open in new window

http://jsbin.com/UYOBALI/1/edit
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
$('select').each(function(){
      if ($(this).has('[selected]')){
        alert($(this).val());
          }
    });
0
Pierre CorneliusCommented:
This should give you what you are after (let me know if you need more info).
$('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>

Open in new window

0
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

hankknightAuthor Commented:
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".
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please see my second post http:Q_28278790.html#a39605335 with working sample   http://jsbin.com/UYOBALI/3/edit
0
hankknightAuthor Commented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What value are you looking for?  The HTML has selected 3 and C.  
 Let me put this in another format. http://jsbin.com/UYOBALI/5/edit
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</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>
  <h1>You selected the following options</h1>
  <div id="results"></div>
</body>
</html>

Open in new window

var results='';
$('select').each(function(){
      if ($(this).has('[selected]')){
         results=results+$(this).val()+'<br>';
          }
    });

$('#results').html(results);

Open in new window


Do you mean you want the value after the drop down changes?  I am not a mind reader.  My first example  http:Q_28278790.html#a39605323 shows this.

Putting it all together

var results='';
$('select').each(function(){
      if ($(this).has('[selected]')){
         results=results+$(this).val()+'<br>';
          }
    });
$('#results').html(results);
$('select').change(function(){
  $('select').each(function(){
      if ($(this).has('[selected]')){
         results=results+$(this).val()+'<br>';
          }
    });
  $('#results').html(results);
   });

Open in new window

http://jsbin.com/UYOBALI/5/edit

If none of this is what you want, please let us know the results you expect.
0
Pierre CorneliusCommented:
I think I understand what you mean.

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>

Open in new window

0
hankknightAuthor Commented:
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>

Open in new window

0
Pierre CorneliusCommented:
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>

Open in new window

0
Pierre CorneliusCommented:
I think I missed something. You want the first option to be selected, right? if so, make the following change:
$(document).ready(function() {	
	$('select').each(function() {
	  $(this).val($(this.parent).find('option:eq(0)').val());
	 });
	alertSelection();
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.