how do I trigger the change event for a given dropdown? $("#programname").change() (if using jquery of course..)
<label for="selectprogramfilter">Program: </label>
<select id="programname" name="selectprogramfilter" class="selectservicefilter" onchange="dropdownClick()">
${DataList}
</select>
</div>
where ${DataList} is
<option value="null">All</option>
<option value="COMPREHENSIVE HEALTH PLANS">MHP</option>
<option value="MI HEALTH LINK">ICO</option>
<option value="HK-DENTAL">HK-Dental</option>
<option value="Healthy Michigan Plan">HMP</option>
I just need to reset the null value and All text in the dropdown in a jquery function but unable to achieve it.
function overallClick(){
$('#programname').prop('selectedIndex',1);
$('#programname').val('1').change();
$('#programname option:selected').text('null');
}
-Try set the selected index to zero which selects the first element.
function overallClick() {
$('#programname').prop('selectedIndex', 0);
}
Related
I am on beginning of the coding life. I am trying to change text in span with selected option, but it gives me values not texts. For example, when I select the bus option, I want it to shows me the "bus" text. I do not want value number. Thanks in advance.
<select id="vehicles" onchange="showChange()">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(){
var selected_vehicle = document.getElementById("vehicles").value;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>
You can first pass this keyword to the function then get the text using selectedIndex of option.
<select id="vehicles" onchange="showChange(this)">
<option value="1">Bus</option>
<option value="2">Car</option>
<option value="3">Plane</option>
</select>
<span id="vehicle"></span>
<script>
function showChange(el){
var selected_vehicle = el.options[el.selectedIndex].text;
document.getElementById("vehicle").innerText = selected_vehicle;
}
</script>
If you keep the inline declarations from your HTML ( generally the preferred approach ) you can assign your event handlers in a separate file. Also, as a point of note - if you submit the form data in the traditional manner ( rather than with AJAX etc ) then the select element needs a name - an ID will NOT appear in the REQUEST array!
document.querySelector('select[name="vehicles"]').addEventListener('change',e=>{
e.target.nextElementSibling.textContent=[ e.target.value, e.target.options[e.target.options.selectedIndex].text].join(' ')
})
<select name='vehicles'>
<option selected hidden disabled>Select mode of transport
<option value='1'>Bus
<option value='2'>Car
<option value='3'>Plane
</select>
<span id='vehicle'></span>
I need the default value of dropdown list for business logic if user doesn't select any value from dropdown list then i have to use default value of dropdown
You can get it by doing document.getElementById('idoftheselect').value
function getDefaultVal() {
console.log(document.getElementById('sel').value)
}
<select id='sel'>
<option val='1'>1</option>
<option val='2'>2</option>
<option val='3'>3</option>
<option val='4'>4</option>
<option val='5'>5</option>
</select>
<button type='button' onclick='getDefaultVal()'>Get Value</button>
add one more option with selected attribut
<select id="someId">
<option value="0" selected>Default</option>
</select>
using this
$('#selector option:selected').val();
In that case add one more option in dropdown like
<option value="-1">-select-</option>
then using jquery
$('select option:selected').val();
will always give the current dropdown selected value.
I have the following code
<select class="needsclick" id="country" name="order[country]">
<option value="USA" selected="selected">USA</option>
<option value="CANADA">CANADA</option>
</select>
I could do the following javascript command to change the option value
document.getElementById("country").value = 'CANADA'
however, this does not change the selected value and does not change the state box to province.
When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)
I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?
If I do the following after changing the value
document.getElementById("country").click()
it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)
How can I achieve this using a javascript command like the two above?
The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.
I can do the following code but it still does not change the state box to province (only if physically clicked)
document.getElementById("country")[1].selected = true
To work with the option elements within a select, you must access the options node list and then select one to work with.
Setting the value is separate from setting the selected flag.
var countries = document.getElementById("country");
var states = document.getElementById("provincesUSA");
var territories = document.getElementById("provincesCanada");
countries.addEventListener("change", function(e) { update(e); });
function update(e){
// show the correct sub-list based on the selected option
var country = countries[countries.selectedIndex];
if(country.value === "USA"){
states.classList.remove("hidden");
territories.classList.add("hidden");
} else if(country.value === "CANADA") {
territories.classList.remove("hidden");
states.classList.add("hidden");
} else {
territories.classList.add("hidden");
states.classList.add("hidden");
}
}
// To dynamically choose
document.querySelector("button").addEventListener("click", function(){
countries.options[2].selected = "selected"; // Canada
// Simulate the change event
update(countries);
});
#provincesUSA.hidden, #provincesCanada.hidden { display:none; }
<select class="needsclick" id="country" name="order[country]">
<option value="" selected="selected">Choose A Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
<select id="provincesUSA" class="hidden" name="states">
<option value="al">Alabama</option>
<option value="ar">Arkansas</option>
</select>
<select id="provincesCanada" class="hidden" name="territories">
<option value="on">Ontario</option>
<option value="qu">Quebec</option>
</select>
<button>Force A Selection (click me whe CANADA is NOT selected)</button>
document.getElementById("country").selectedIndex = 2;
EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.
is there anyway of getting the onchange to work with jquery? Right now i'm using prototype.js. What the onchange does is when either US, CA or GB is selected it shows the state dropdown box for it. basically a show / hide
<SELECT id='country' onchange="HandleStateApearence(this.selectedIndex,
null, $('state_'), $('state_3'), $('state_2'),
null, 1, 2, false)" name=add[country]>
<OPTION value="" selected>-- Select Country --</OPTION>
<OPTION value=US>United States</OPTION>
<OPTION value=CA>Canada</OPTION>
<OPTION value=GB>United Kingdom</OPTION>
</SELECT>
<span id='state_' style="display:none; font-weight:bold;">State:</span>
<SELECT id=state_2 style="DISPLAY: none" name="c_state">
<OPTION value="" selected>-- Select Province --</OPTION>
<OPTION value=AB>Alberta</OPTION>
<OPTION value="BC">British Columbia</OPTION>
</SELECT>
<SELECT id=state_3 style="DISPLAY: none" name="u_state">
<OPTION value="" selected>-- Select State --</OPTION>
<OPTION value=AL>Alabama</OPTION>
<OPTION value=AK>Alaska</OPTION>
<OPTION value=AZ>Arizona</OPTION>
</SELECT>
You haven't shown the definition of HandleStateAppearence(), so I'm not sure what its parameters' expected types are, but in jQuery the $('someselectorhere') function returns a jQuery object that you can treat as if it is an array elements that matched the selector (potentially an empty array, though it won't be in your case). Also, to select an element by ID you use "#", e.g., $('#state_') - jQuery selectors (mostly) follow the syntax of CSS selectors.
So putting those two points together, if your function is expecting direct references to the select elements you need to say $('#state_')[0]:
<SELECT id='country' onchange="HandleStateApearence(this.selectedIndex, null,
$('#state_')[0], $('#state_3')[0], $('#state_2')[0], null, 1, 2, false)"
name=add[country]>
EDIT: Here's a complete jQuery-based method to handle the show/hide of applicable state select elements.
<script>
$(document).ready(function() {
$("#country").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label").hide();
else {
$("#state_label").show();
stateSelect.show();
}
});
});
</script>
<SELECT id='country' name=add[country]>
<OPTION value="" selected>-- Select Country --</OPTION>
<OPTION value=US>United States</OPTION>
<OPTION value=CA>Canada</OPTION>
<OPTION value=GB>United Kingdom</OPTION>
</SELECT>
<span id='state_label' style="display:none; font-weight:bold;">State:</span>
<SELECT id="state_CA" class="state" style="DISPLAY: none" name="c_state">
<OPTION value="" selected>-- Select Province --</OPTION>
<OPTION value=AB>Alberta</OPTION>
<OPTION value="BC">British Columbia</OPTION>
</SELECT>
<SELECT id="state_US" class="state" style="DISPLAY: none" name="u_state">
<OPTION value="" selected>-- Select State --</OPTION>
<OPTION value=AL>Alabama</OPTION>
<OPTION value=AK>Alaska</OPTION>
<OPTION value=AZ>Arizona</OPTION>
</SELECT>
I've removed the inline onchange handler and instead assigned the change handler via jQuery, done inside the document.ready handler so that we can be sure the country element has already been parsed. This is the standard way to assign event handlers.
In your html, I've given each state select element a class of "state" so that we can easily select them all at once to hide them with a single statement.
I've also changed the ID attribute of the select elements to be "state_{countrycode}", e.g., "state_CA", where the codes match exactly with the corresponding values in the country option elements. That way we can reference them in JavaScript by concatenating the currently selected country code to the end of "state_" and if you later add more countries to the list with their own corresponding state drop-down you won't need to change the JavaScript at all. The most important line of code is probably this one:
var stateSelect = $("#state_" + $(this).val());
Which declares a variable stateSelect that will be assigned to a jQuery object containing all elements that match a selector that is an element ID of "state_{currentcountrycode}". Depending on which country option is selected that stateSelect jQuery object will contain exactly 0 or 1 elements, so I then test the length of the object and if it is 0 I hide the state label (I changed its ID too, to be more descriptive), or if the length is 1 I show the state label and the select element.
I'm not well versed with prototype.js, but what it looks like you're doing is passing in elements to your change handler function.
In jQuery, if you're going to be selecting using IDs, you have to prepend the id value with a #.
HandleStateApearence(
this.selectedIndex, null,
$('#state_'), $('#state_3'), $('#state_2'),
null, 1, 2, false
)