How can I rewrite this javascript code, so that it will refer to every optionbox?
Question
How can I rewrite this javascript code, so that it will refer to every optionbox (not only the first one)?
<html>
<div id="form123">
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<select id="day" name="day">
<option value="abc" name="abc" id="abc">abc</option>
<option value="other" name="other" id="other">other...</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementById("day")
selectmenu.onchange=function(){
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value=="other"){
var entered_date = window.prompt("Enter the date","");
document.getElementById('other').value = entered_date;
document.getElementById('other').text = entered_date;
}
}
</script>
</div>
</html>
So far, dialogbox shows up only when I choose the first optionbox.
I want to dialogbox show up even if I choose another optionbox.
In the future, optionboxes will be added dynamically.
2 answers
solution1
5 ACCPTED 2014-11-16 11:35:14
ID must be unique. I suggest to use a function on every select on change event and pass this as parameter like:
function changeDate(obj) { var chosenoption = obj.options[obj.selectedIndex]; if (chosenoption.value == "other") { var winProVal = window.prompt("Enter the date", ""); if (winProVal != null) { obj.options[obj.value].value = obj.options[obj.value].text = winProVal; } } }
<select class="day" name="day" onchange='changeDate(this);'> <option value="abc" name="abc" id="abc">abc</option> <option value="other" name="other" id="other">other...</option> </select> <select class="day" name="day" onchange='changeDate(this);'> <option value="abc" name="abc" id="abc">abc</option> <option value="other" name="other" id="other">other...</option> </select> <select class="day" name="day" onchange='changeDate(this);'> <option value="abc" name="abc" id="abc">abc</option> <option value="other" name="other" id="other">other...</option> </select>
this refers to the element. Also change ID with class.
solution2
1 2014-11-16 11:43:23
IDs are supposed to be unique (so are names). You may define class of elements and change your js accordingly..
<html>
<div id="form123">
<select id="day" name="day" class="day">
<option value="abc" name="abc1" id="abc1">abc</option>
<option value="other" name="other1" id="other1">other...</option>
</select>
<select id="day" name="day" class="day">
<option value="abc" name="abc2" id="abc2">abc</option>
<option value="other" name="other2" id="other2">other...</option>
</select>
<select id="day" name="day" class="day">
<option value="abc" name="abc3" id="abc3">abc</option>
<option value="other" name="other3" id="other3">other...</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementsByClassName("day");
for (var i = 0; i < selectmenu.length; ++i) {
selectmenu[i].onchange=function(){
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value=="other"){
var entered_date = window.prompt("Enter the date","");
this.options[1].value = entered_date;
this.options[1].text = entered_date;
}
}
}
</script>
</div>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I rewrite this code so that execution is not forced to start from Javascript Promise .then() method?
How can I rewrite this jQuery code into Javascript?
How to rewrite a code, so i can run it on Acrobat?
How can I rewrite this javascript code to C++11?
how to rewrite .every() in Javascript
How can I reduce this code javascript code so it's not as repetitve?
How can I rewrite this function so I don't have to explicitly type out every IP address within a range?
How to add a JavaScript code in xcode so that i can run it in webview
How can I encrypt JavaScript code so that it's not decryptable?
How can I execute javascript code every a specific time interval?
Related Tags