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

x
?
Solved

JQuery To Grab a Selct Option Id

Posted on 2014-09-06
19
Medium Priority
?
291 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

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.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
Suggested Courses
Course of the Month13 days, 15 hours left to enroll

580 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