I have a ddl control. I want to change the visibility of some items on the client-side (JS).
I only found methods to insert\remove items.
But I only want to hide\show them.
Does someone has an idea how to do so ?
You need to access the item and set its [edit]style.display[/edit] to "none":
<html>
<head>
<script type="text/javascript">
function hideItem() {
document.getElementById("a3").style.display = "none";
}
</script>
<body onload="hideItem()">
<form>
<select name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
</form>
</body>
</html>
I think you are looking for the
<span style="display:none">
option. You can toggle this style using Javascript.
In Firefox, you can use the display style:
<select id="s" name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
and:
document.getElementById("a3").style.display = "none";
However, this will not work on Internet Explorer. For IE, you can only remove the element entirely (possibly re-adding it later):
document.getElementById("s").options[2] = null;
You could move the element to a separate, hidden <select /> if you want to store it somewhere for adding back later.
The only thing you can do is removing the option.
You can do this simply in jQuery by:
$('#yourOptionId').remove();
Or you can disable the option by:
$('#yourOptionId').attr('disabled', 'disabled');
And enable by:
$('#yourOptionId').removeAttr("disabled");
But no there is no way to simply hide an option.
By "ddl control" I'm assuming the structure will be like:
<select id="selectId">
<option id="optionId"></option>
</select>
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!!
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 have this working in IE 7 using getElementById() but in IE8 and IE9 that does not work. What I am doing is I need to do validation on the select boxes to see that they are required and check what they selected to do other things. I also need to check the input boxes to see what the value is and it is required as well.
function saveTest(){
var startNumber=0;
var endNumber=3;
// Works
alert(document.myForm.mySelect_1.value);
for (i = startNumber; i <= endNumber; i++) {
// I know this is not right but I am trying everything
alert(document.myForm.mySelect_+i.value);
// Using JQuery to try to solve the issue and this does not work for me.
alert($('#mySelect_'+i).val());
}
}
I know these are not dynamically created belwo but this is just to help me find the answer to this issue. I am creating more selects
<input name="myText_1" id="myText_1" value="">
<br />
<select name="mySelect_1" id="mySelect_1">
<option value="0">- - - Select One - - -</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
</select>
<br />
<input name="myText_2" id="myText_2" value="">
<br />
<select name="mySelect_2" id="mySelect_2">
<option value="0">- - - Select One - - -</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
</select>
<br />
<input name="myText_3" id="myText_3" value="">
<br />
<select name="mySelect_3" id="mySelect_3">
<option value="0">- - - Select One - - -</option>
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
</select>
<br />
Save
If I am not clear enough let me know. I will do my best to explain anything you do not understand.
Thanks for your time.
The following line is not correct; you are trying to concatenate a variable name, called mySelect_ to an integer:
alert(document.myForm.mySelect_+i.value);
Instead, you should use the associative array syntax:
alert(document.myForm['mySelect_'+i].value);
Also, within this same loop, you should start from 1 instead of 0, since there's no element called mySelect_0.
Here's a working DEMO.
You have created drop downs with Names
Try using
$('select[name=mySelect_'+i+']').val();
else
$("#id option:selected").text()
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>
<select name="history" id="history" >
<option value="history 1" onClick="alert('h1');">history 1</option>
<option value="history 2" onClick="alert('h2');">history 2</option>
<option value="clearhistory" onClick="this.form.submit();" >Clear History</option>
</select>
could someone help me with this script?
i am expecting that whenever the user clicks history 1 ..it will alert h1
the script works in firefox and IE but not in Chrome :(
If you want to use onClick for option element in Chrome, IE, etc., you must use short fix: set onChange attribute of select element to "this.options[this.selectedIndex].onclick()"
use onchange instead of onclick for select lists.
<select name="history" id="history" onchange="historyChanged(this);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function historyChanged() {
var historySelectList = $('select#history');
var selectedValue = $('option:selected', historySelectList).val();
alert(selectedValue);
if (selectedValue == 'clearHistory') {
historySelectList.form.submit();
}
}
$(function() {
alert('my alert');
$('select#history').change(historyChanged);
});
</script>
Use onChange on the select instead of each option. here is the jsfiddle http://jsfiddle.net/tBjkg/
<select name="history" id="history" onChange="alert(this.value);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
The alert(this.value) is referring to the value of the option within the select that is currently selected.
In some browsers,
choosing same option second time,
no onchange-event throws.
This helps:
<select onchange="alert/*orwhateveryoudowith:*/(this.value);/*but set:*/this.selectedIndex=0">
<option disabled selected>Choose your Plan</option>
<option value=1>Plan 1</option>
<option value=2>Plan 2</option>
<option value=3>Plan 3</option>
</select>
Although the selected solution works, but here is a more clearer and easy way to do this:
<select name="history" id="history" >
<option value="history 1">history 1</option>
<option value="history 2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#history').on('change', function() {
if ( this.value == 'history 1')
{
alert('h1');
// You can also do anything here
}
if ( this.value == 'history 2')
{
alert('h2');
// You can also do anything here
}
if ( this.value == 'clearhistory')
{
this.form.submit();
// You can also do anything here
}
});
});
</script>