SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi values in select options.

    Multi values in select options.

    Hi all

    I have a simple select drop down menu here with values for each option that I can capture with Jquery.

    http://www.ttmt.org.uk/val/

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    	
    	<style type="text/css">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 form{
    	   margin:50px;
    	 }
    	</style>
    	
    </head>
    
    <body>
      
      <form action="" method="">
        <select id="select">
          <option value="One" value1="OneOne">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
          <option value="Four">Four</option>
          <option value="Five">Five</option>
        </select>
        <input type="submit" name="submit" id="set" value="Set" /> 
      </form>  
    
    
    
      <script type="text/javascript">
        $('#set').click(function(e){
          e.preventDefault();
          var val = $('#select').val();
          alert(val);
        })
      </script>
      
    </body>
    </html>

    Is it possible to have more than one value in each option that I could then capture with jQuery.

    So could I have

    Code:
    <option value="One" value1="OneOne">One</option>
    and then capture it like

    Code:
    var val = $('#select').val();
    //
    var val1 = $('#select').val1();

    This doesn't work but is it possible to do this another way?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could delimit the values then let the receiving script split them out:
    Code:
    <option value="Red|Green|Blue">One</option>
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    You could delimit the values then let the receiving script split them out:
    Code:
    <option value="Red|Green|Blue">One</option>
    They could be split up with:

    Code javascript:
    var values = $('#select').val().split('|');
    // values[0] is 'Red', values[1] is 'Green', etc...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •