I display different text based on the select option it works for the first element but id doesnt work for other element in the iteration
index.ejs
<select class="pay_method">
<option selected>Selelct bank</option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
<div class="paymentMethod p1">
<p>Acc.</p>
</div>
<div class="paymentMethod p2">
<p>Acc.</p>
</div>
index.js
$(".pay_method").change(function () {
$('.paymentMethod').slideUp();
switch ($('.pay_method :selected').val()) {
case '1':
$('.p1').slideDown();
break;
case '2':
$('.p2').slideDown();
break;
}
});
Make onchange works on all element
Could you check, what is your jquery version used? It could be related to that, try with 1.6.4 f.e.
Related
I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?
There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length
Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);
You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
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.
I have 4 selects on a page and only the first one is visible. Also, the first select has basic prompt string: Choose person like this:
<select name="post[person_id]">
<option value="">Choose person</option>
<option value="1">David</option>
<option value="2">Sam</option>
<option value="3">Tobias</option>
</select>
Once user chooses some option from the first dropdown, the other 3 selects have to be displayed.
How to implement it?
Here is a simple jquery solution. The key is to use the .change event and hook it up to your dropdown(s).
HTML
<select id="controllerDD">
<option value="">Select...</option>
<option value="Show 1">Show 1</option>
<option value="Show 2">Show 2</option>
<option value="Show All">Show All</option>
</select>
<p>DD 1</p>
<select id="DD1" style="display:none">
<option value="blah">Select...</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
</select>
<p>DD 2</p>
<select id="DD2" style="display:none">
<option value="blah">Select...</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
</select>
JavaScript
$('#controllerDD').change(function (e) {
var selected = $(e.currentTarget).val();
$('#DD1').hide();
$('#DD2').hide();
switch (selected) {
case "Show 1":
$('#DD1').show();
break;
case "Show 2":
$('#DD2').show();
break;
case "Show All":
$('#DD1').show();
$('#DD2').show();
break;
default:
break;
}
})
You have to use onchange methods.
<select onchange="myFunction()">
<script>
function myFunction(){
// fetch new data for the next select.
//append the new options on next select.
// make select available or enabled
}
</script>
For the first select use the onchange to fetch (populate) the options of the next selects. And do the same for the following selects.
You can also fetch and make it available in the instance you finish to populate the select.
In case you are not using jQuery. You can append the option
I have two different select elements in a form
When I select an option in the first list, I want a corresponding option to be automatically set in the second list. I have made a few attempts, and I am close to getting it working using reactive-var but I need some help.
My template looks like this
<template name="inputForm">
<div class="section">
<form action="#">
<div class="row">
<div class="input-field col m4">
<select id="list-one">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
<label>Select List 1</label>
</div>
{{{secondListVar}}}
</div>
</form>
</div>
</template>
Then in the template helper file I have
var secondListVar = new ReactiveVar("<div class='input-field col m4'><select id='list-two'><option value='' selected>Choose your option</option></select><label>Select List 2</label></div>");
Template.inputForm.helpers({
secondListVar: function() {
return secondListVar.get();
}
});
Template.inputForm.events({
'change #list-one' : function() {
var listOneChoice = $('#list-one option:selected').text();
switch (listOneChoice) {
case "100":
secondListVar.set("<div class='input-field col m4'><select id='list-two'><option value='' selected>1.5</option></select><label>Select List 2</label></div>");
break;
case "75":
break;
case "50":
break;
case "25":
break;
case "25":
break;
}
}
});
If I select an option from the 1st list, the 2nd list seems to get cleared
but then if I click a radio button that causes the template to be hidden/shown I get this
So I have two issues
The rendering doesn't seem to be dynamic, in that I need to manually force it
When I get the 2nd list option shown, the corresponding state of the 1st list is lost
I would suggest creating the second list as html, and set its selection inside an autorun if you want to use a ReactiveVar.
Here's a working example :
http://meteorpad.com/pad/JLkM8ftKQuKhBvF3r/Lists
<template name="Main">
<label>Select List 1</label>
<select id="list-one">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
<label>Select List 2</label>
<select id="list-two">
<option value="" disabled selected>Choose your option</option>
<option value="1">100</option>
<option value="2">75</option>
<option value="3">50</option>
<option value="4">25</option>
<option value="5">25</option>
</select>
</template>
var SelectedItem = new ReactiveVar();
Template.Main.events({
'change #list-one' : function() {
var selected = $('#list-one option:selected').val();
SelectedItem.set(selected);
}
});
Template.Main.onCreated(function(){
this.autorun(function(){
var selected = SelectedItem.get();
$('#list-two option').eq(selected).prop('selected', true);
});
})
However, you may not even need a ReactiveVar, in this case you can set the second list directly via jquery if you wanted.
#looshi answer is the correct one, but I was also encountering issues due to the materialize package which are now sorted in my meteorpad example in light of the workaround posted here
I'm having a similar problem using Materialize. Your form select dropdowns are being created by Materialize based on values when the page is originally rendered. You will need to rerun the initialization code each time:
$('select').material_select();
Here's an example based on taking values from iron routers data function:
Tracker.autorun(function(e){
var data = Router.current().data();
Tracker.afterFlush(function(){
//dom is now created.
$('select').material_select();
});
});