/    Sign up×
Community /Pin to ProfileBookmark

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.

[url]http://www.ttmt.org.uk/val/[/url]

[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>

[/code]

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>
[/code]

and then capture it like

[code]
var val = $(‘#select’).val();
//
var val1 = $(‘#select’).val1();
[/code]

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

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@bionoidDec 18.2011 — Just a suggestion here, and making a few assumptions...

Why not put both values into the same attribute, but have a delimiter:

[CODE]<option value="One|OneOne">One</option>[/CODE]

Then do something like this with jQuery:

[CODE]var val = $('#select').val().split('|');[/CODE]

Then refer to your values like:

[CODE]val[0]; //One
val[1]; //OneOne[/CODE]
×

Success!

Help @ttmt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...