I have a form that passes values to a function.
<TR><TD>Select</TD><TD><select name=k_id>
<OPTION value=1 onClick="myfun('10','0.1','1')">Option 1</OPTION>
<OPTION value=2 onClick="myfun('20','0.2','2')">Option 2</OPTION>
<OPTION value=3 onClick="myfun('30','0.3','3')">Option 3</OPTION>
<OPTION value=4 onClick="myfun('40','0.4','4')">Option 4</OPTION>
</select>
function myfun(id,h,k,g)
{
var h_id=document.getElementById('h_id');
h_id.value=id;
var hind=document.getElementById('hind');
hind.value=h;
var koe=document.getElementById('koe');
koe.value=k;
}
But it doesn't work if the user selects an option using arrow keys and Enter.
How can I pass appropriate values to myfun() with pressing Enter?
I have tried:
<OPTION value=1 onClick="myfun('10','0.1','1')" onkeypress="if(event.key == 'Enter') {myfun('10','0.1','1')}">Option 1</OPTION>
<OPTION value=1 onClick="myfun('10','0.1','1')" onkeyup = "if(event.keyCode == 13){myfun('10','0.1','1')}">Option 1</OPTION>
<OPTION value=1 onClick="myfun('10','0.1','1')" onkeydown = "if(event.keyCode == 13){myfun('10','0.1','1')}">Option 1</OPTION>
I have tried adding onchange to select element in the past but that had other issues. And would require rewriting the code that populates options list.
Use the select.onchange event instead, like this:
function myfun(id,h,k){
console.log(id,h,k)
}
<TR><TD>Select</TD><TD><select name=k_id onchange="myfun(...JSON.parse(this.value))">
<OPTION value='["10","0.1","1"]'>Option 1</OPTION>
<OPTION value='["20","0.2","2"]'>Option 2</OPTION>
<OPTION value='["30","0.3","3"]'>Option 3</OPTION>
<OPTION value='["40","0.4","4"]'>Option 4</OPTION>
</select>
This answer attempted to listen for clicks, and it seems like it worked at the time. But it doesn't work in the current version of Chrome.
Using the onChange call will result in a duplicate code, and more unreable thinks.
Consider placing your data in data- sets, so you can use a onChange event on the select. This event will trigger when your press and when you use your keyboard. So no need to duplicate code.
Then use dataset to get your data back from the new value:
function myfun(event) {
const e = event.target;
const { id, h, k } = e.options[e.selectedIndex].dataset;
console.log('Change: ', id, h, k);
}
<TR><TD>Select</TD><TD>
<select name="k_id" onChange='myfun(event)'>
<OPTION value=1 data-id='10' data-h='0.1' data-k='1'>Option 1</OPTION>
<OPTION value=2 data-id='20' data-h='0.2' data-k='2'>Option 2</OPTION>
<OPTION value=3 data-id='30' data-h='0.3' data-k='3'>Option 3</OPTION>
<OPTION value=4 data-id='40' data-h='0.4' data-k='4'>Option 4</OPTION>
</select>
Related
I'm using multiple select of Materialize CSS in a form to select multiple values. The UI is working fine, but I couldn't find a way to retrieve all the selected values. I used an onChange event handler to retrieve the values. However instead of an array of selected values it is returning only the first selected value in the list.
Can anybody explain how to do it using JavaScript for a simple multiple select like the one below? (Not by using jQuery)
<select id='mySelect' multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
You can get the selected in this way:
html:
<select multiple id="option-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
js
document.addEventListener("DOMContentLoaded", function () {
const selects = document.querySelector("select");
const instances = M.FormSelect.init(selects, {});
const selectOption = document.querySelector("#option-select");
selectOption.addEventListener("change", function () {
const instance = M.FormSelect.getInstance(selectOption);
const selectedValues = instance.getSelectedValues();
console.log(selectedValues);
});
});
I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.
I have two dropdown selects that have the same values. I am building a converter from the source (left) unit to the destination (right) unit . It doesn't make sense to convert to and from like units. I know how to add an event on a dropdown select to remove the selected option from the alternate box but I am unclear on writing this to produce the best UI experience. Give the following trimmed case:
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
What might be a best practice for approaching this? If you choose a source of "Unit 2" how should destination react, remove it? Then I need a reset button, or if you choose "Unit 2" in destination as well, bounce source to something else (that seems worse and intuitive)?
Forget about this and just validate on submit?
Check the new value on each dropdown change event.
If the value is also selected in the other dropdown, move the value of the other dropdown to next (or default) option.
To give the user a clue that he should not select the same value twice, gray out the values that are already select in the other dropdown.
I have written the code for you, here is an executable snippet:
$("#srcUnit, #dstUnit").change(function(){
/*Detect wether we have srcUnit or dstUnit */
if($(this).attr("id") == "srcUnit"){var otherUnit = "dstUnit";}
else{var otherUnit = "srcUnit";}
/*Save new Value*/
var newVal = $(this).children("option:selected" ).val();
/*Select next option in other dropdown if it's old value was selected*/
if(newVal == $("#"+otherUnit+" option:selected").val()){
$('#'+otherUnit+' option:selected').removeAttr('selected').next().attr('selected', 'selected');
}
/*Update UI*/
$('#'+otherUnit+' option').removeClass("disabled");
$('#'+otherUnit+' option[value="'+newVal+'"]').addClass("disabled");
});
.disabled {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="srcUnit" id="srcUnit">
<option value="Unit 1" selected>Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1" class="disabled">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
I edited my answer to better fit the question, old Answer:
Use the HTML 5 disabled attribute.
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" disabled>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
Read more and try out here: http://www.w3schools.com/tags/att_option_disabled.asp
Subscribe to the onchange event of the dropdowns with javascript and toggle the attribute as needed.
I'm kicking my self for not being able to do this. But I've tried almost everything. I simply want to redirect a user to a specific page when they click an option in my option value list. Here's my current code (which should explain my question better):
<select name="test_redirect">
<option value="1" onclick="document.location = 'http://localhost/shop?item=1';">Item 1</option>
<option value="2" onclick="document.location = 'http://localhost/shop?item=2';">Item 2</option>
<option value="3" onclick="document.location = 'http://localhost/shop?item=3';">Item 3</option>
</select>
I've also tried onChange as well. Same result. Can some one please help me with this? Thank you guys.
document.querySelectorAll("[name=test_redirect]")[0].addEventListener('change',
function () {
window.location = "http://localhost/shop?item=" + this.value;
});
This depends on a relatively new browser (with querySelectorAll and addEventListener), but the principle's the same. click doesn't get triggered on options, so you have to go with change on the <select>. Might as well consolidate the code a bit too.
http://jsfiddle.net/5n5ZE/
<select id="test_redirect">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
javascript
var val = document.getElementById("test_redirect").value;
window.location.href = "http://localhost/shop?item=" + val;
jquery
$("#test_redirect").change(function(){
var val = $(this).val();
window.location.href = "http://localhost/shop?item=" + val;
});
try this (give the link of the page in value of each option)
<select name="test_redirect" onchange="window.location.href=this.form.test_redirect.options[this.form.test_redirect.selectedIndex].value">
You need to bind the event handler to the <select> and not the individual options:
<select name="test_redirect" onchange="location.assign('http://localhost/shop?item=' + this.options[this.selectedIndex].value)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
This will save you lines :
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
try this
<select name="test_redirect" onchange="location.href='http://localhost/shop?item='+this.value">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Here is what I've started to do: http://jsfiddle.net/nd9ny/
For now it doesn't work as I want it to.
I want to update options each time when a new select input is added or an input is removed.
For example, we have our first select input with these options:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
And then, If I remove the first input, the second one becomes:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
Pure Javascript code needed.
You may try the following solution:
- CSS:
.hidden {
display: none;
}
- JS function:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
- HTML example:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
Note: This function was tested with Firefox, you may have to check if this works with other browsers.
Hope this helps