Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 627
  • Last Modified:

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

0
hankknight
Asked:
hankknight
  • 4
  • 4
  • 3
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
$(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 MVEDeveloperCommented:
$('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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 MVEDeveloperCommented:
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 MVEDeveloperCommented:
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now