Access Dropdown Box Value When changed via JQuery - javascript

Hey, can you help me figure this out? I need to hide/show a div based on a dropdown box (the dropdown box only has a name, no id). If the value of the dropdown box is 2, it needs to be shown and for anything else it needs to be hidden. Here is what I have so far, but it doesn't seem to work (I tried using similar code on a checkbox and it worked fine, so obviously i'm missing something). (It's not possible to modify the dropdown box's code)
JavaScript
$(document).ready(function() {
$('#addons').hide();
$("input[name='configoption[1]']").change(function() {
if($(this).val() != 2) {
$('#addons').hide();
} else
$('#addons').show();
} );
});
});
HTML
<select name="configoption[1]">
<option value="1" selected="selected">Test 1</option>
<option value="2">Test 2</option>
</select>
<div id="addons">
Hi
</div>

It seems you just simply specified the wrong element name, input should be select.
$("select[name='configoption[1]']")
make sure you are getting the element by doing this:
alert( $("select[name='configoption[1]']").length )
it should be anything other than 0.

Use an onchange option. Change
<select name="configoption[1]">
to
<select name="configoption[1]" onchange="javascript:function;">

Related

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

How do you access a select pull down menu object with no ID or Class?

and then tell which selectedIndex was selected?!
here's the situation: the select object has no id or class. and the goal of the code is to make sure the user makes a selection before 'adding to cart'. further, this appears on many different product pages so the code needs to run not on the option value that was selected but rather on if the first option was selected or not. see below to clarify:
<select name="id[1]" id="attrib-1">//id cannot be used as it will be diff from page to page
<option value="20" selected="selected">Please Select</option>//can't be selected when put into cart
<option value="212" >Green</option>
<option value="208">Yellow</option>
<option value="210">Orange</option>
</select>
<input type="image" src="img/add.png" />//Add to cart button, has no id either.
this has to be triggered w/ an onclick of the 'add to cart' button. so my pseudo code would be:
$('input[type=image]').click(function(){
if(select option: is first option select) {
run some code} else (if anyother option other the first) {
run some diff code
}
thanks for the help. am spending way to much time on this, …uggg!
nevermind, i got it
$('input[type=image]').click(function(){
if ($("select > option:first").is(":selected")) {
//run some code
} else {
//run some diff code
}
})

Dynamic select option list resetting to first value

I've got a dynamically populated <select> list, where the first option is created by HTML and PHP when the page first loads, but when you drop down, javascript populates a list of additional options. However, when I select an option and remove focus, it is reset to the original selected option. I'm pretty sure that what I'm doing is not getting saved, but I'm not sure how to fix it.
Here's the HTML, which works fine:
<select name="select1" id="select1" onfocus= "checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select>
The checkSelect() function does a bunch of stuff, but then it ends as follows:
//do a bunch of stuff, ending in populating the 'legal' array.
document.input_form.select1.options.length=1;
//which I think is actually redundant
for (i=0; i < legal.length; i++)
{
document.input_form.select1.options[i+1]=new
Option(legal[i], legal[i], false, false);
}
Am I missing something necessary to make the option persist on the page?
The only reason I could think of such a behavior would be select1 wrapped into unclosed tag <label>, for example:
<label>label <!--may be missing </label> here -->
<select name="select1" id="select1" onfocus="checkSelect(this.value)">
<option value ="XXX">XXX</option>
</select> <!--may be missing </label> here -->

Change text inside dynamic div when on select change is made jquery

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>
Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});
Try this
​$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});​
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/

Populating secondary dropdown from main dropdown through JS

I have a dropdown which must populate several other dropdowns depending on the option selected. I found a way how to do this using hidden fields. I created a hidden field for every sub dropdown with all its options. Then from my JS function, I check which selectedIndex is selected and then give the value of its respective hidden field.
This way works great, however, I am setting the value of the sub dropdown using the variable ID FROM the Js function. This reduces flexibility.
Does anybody know any other way how to pass all the parameters from the HTML?
Best method would be that all dropdowns are there but are not displayed. Upon change of the main dropdown, the respective sub drop down ONLY is shown.
Any ideas?
You should be able to do just what you want, have all the dropdowns hidden except the correct one.
<script type="text/javascript">
function changedropdown(index) {
dropdowns['dropdown1'].style.display='none';
dropdowns['dropdown2'].style.display='none';
dropdowns['dropdown3'].style.display='none';
dropdowns['dropdown4'].style.display='none';
dropdowns[index].style.display='inline';
}
</script>
<form name='dropdowns'>
<select onchange='changedropdown(options[selectedIndex].value)'>
<option selected value='dropdown1'>1</option>
<option value='dropdown2'>2</option>
<option value='dropdown3'>3</option>
<option value='dropdown4'>4</option>
</select>
<select name='dropdown1'>
<option selected value=1>dropdown1</option>
</select>
<select style='display:none' name='dropdown2'>
<option selected value=1>dropdown2</option>
</select>
<select style='display:none' name='dropdown3'>
<option selected value=1>dropdown3</option>
</select>
<select style='display:none' name='dropdown4'>
<option selected value=1>dropdown4</option>
</select>
</form>
If I understand the issue, the hidden values are not being returned in your post? To get around this issue I run a routine on submit that grabs all the hidden values and puts them into non hidden inputs of type hidden.
So...assuming you use jquery that would be something along the lines of
<div id='hiddenValues'></div>
<script type='text/javascript'>
function onSubmit() {
var hiddenValue = $('$yourHiddenSelectBox').val();
$('#hiddenValues').append("<input type='hidden' name='someId' value='" + hiddenValue + "'>";
}
</script>

Categories

Resources