Solved

JQuery To Grab a Selct Option Id

Posted on 2014-09-06
19
281 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript the "if condition with Or" 8 29
jQuery on Submit 4 41
Insert Button on a table 16 37
asp Google Map 2 31
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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)

856 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