Solved

JQuery To Grab a Selct Option Id

Posted on 2014-09-06
19
275 Views
Last Modified: 2014-09-06
Is there a way to grab an Option ID from a select box?
<script>
function findDeduc()	{
	var deduc = document.getElementById('my-deductible'). SELCT BOX OPTION ID;
}
</script>

<form>
<select name="my-deductible" onchange="findDeduc()" >
<option id="one" value="LAND">Land</option>
<option id="two" value="SEA">Sea</option>
<option id="three" value="AIR">Air</option>
</select>
</form>

Open in new window

So if I chose Air the VAR deduc would = "Three".  How do I write that?  How do I even write this question?
0
Comment
Question by:rgranlund
  • 10
  • 9
19 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40307891
http://jsfiddle.net/8obocb4e/1/

$("[name=my-deductible]").change(function () {
    alert($(":selected", this).attr("id"))
})

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40307904
How do I change this line:
 alert($(":selected", this).attr("id"))

into a Variable?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40307908
What do you mean?

somevar = $(":selected", this).attr("id")

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40307939
So if I want to pass along the value of the ID to another field?

<script>
$("[name=my-deductible]").change(function () {
    deduc = $(":selected", this).attr("id")
    document.getElementById('deductible-amount').value = deduc;	
});	
</script>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40307941
Yep, tho since you are using jquery you could do

$("[name=my-deductible]").change(function () {
     $("#deductible-amount").val($(":selected", this).attr("id"))
})

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40307989
Can that be placed within a function so it can be used elsewhere?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40307997
Yep
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308003
I made a small adjustment to fit my code and it will not pass forward the value of the id.  Any ideas why not?
<script>

$("[name=my-deductible]").change(function () {
     $("#addon-28-custom-price[deductible-amount]").val($(":selected", this).attr("id"))
})
<script>

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308008
Also, hwo would I write that as a function.  I'm sorry, I'm very new to jQuery
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 58

Expert Comment

by:Gary
ID: 40308012
Don't know without seeing the page or the relevant code

function somefunction(){
$("#deductible-amount").val($("[name=my-deductible] :selected").attr("id"))
}

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308084
The following does nothing:  I'm confused.

<script>

$("[name=my-deductible]").change(function () {
     $("#addon-28-custom-price[deductible-amount]").val($(":selected", this).attr("id"))
})
<script>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40308086
Post your real code
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308096
This is in Wordpress and I am trying to use jQuery:
I want to put the ID from my-deductible into the value of addon-28-custom-price[deductible-amount] onChange.

<script>
$("[name=my-deductible]").change(function () {
     $("#addon-28-custom-price[deductible-amount]").val($(":selected", this).attr("id"))
})

</script>


<select name="my-deductible" id="my-deductible" required="">
	<?php
		foreach ($p_damage as $pd)	{
			$ded = $pd->deductible;
			$deduc = number_format($ded);
			$deduc_factor = $pd->deductible_factor;

				$dollar = "$";
				echo '<option id="'.$deduc.'" value="'.$deduc_factor.'"';
					if(isset($_POST['my-deductible']) && $_POST['my-deductible'] == $deduc_factor) { echo 'selected'; } 
					echo '>'.$deduc.' '.$dollar.'</option>';
				}
			?>
			</select>						
<input type="hidden" name="addon-28-bicycle-info[deductible-amount]" id="addon-28-bicycle-info[deductible-amount]" value="<?php if(isset($_POST['addon-28-custom-price[deductible-amount]'])) { echo $_POST['addon-28-custom-price[deductible-amount]']; } ?>" >

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40308103
In WP you have to use jQuery not $

So
jQuery("[name=my-deductible]").change(function ($) {
     $("#addon-28-custom-price[deductible-amount]").val($(":selected", this).attr("id"))
})

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308108
This gives the alert but does not insert the ID value

jQuery( document ).ready(function( $ ){
    $("#my-deductible").change(function() {
    $("#addon-28-bicycle-info[deductible-amount]").val($("#my-deductible option:selected").attr("id"))
        alert($('#my-deductible option:selected').attr("id"));
    });
});

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40308110
What is the html for addon-28-bicycle-info[deductible-amount]
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308112
<input type="hidden" name="addon-28-bicycle-info[deductible-amount]" id="addon-28-bicycle-info[deductible-amount]" value="<?php if(isset($_POST['addon-28-bicycle-info[deductible-amount]'])) { echo $_POST['addon-28-bicycle-info[deductible-amount]']; } ?>" >

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40308113
I have it working now with the following but is it the best way???

jQuery( document ).ready(function( $ ){
    $("#my-deductible").change(function() {
        var deduc = ($('#my-deductible option:selected').attr("id"));
        document.getElementById('addon-28-bicycle-info[deductible-amount]').value = parseFloat(deduc);
        alert ('' + deduc + '');
    });
});

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40308120
Thats fine.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now