Solved

JQuery To Grab a Selct Option Id

Posted on 2014-09-06
19
279 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

777 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