Is there a way to not show the first option inside the dropdown list of a HTML select tag? They only thing I know of is to disable it from being clicked but I want it to not be shown inside the dropdown, like this :
<select class="archive" onChange="window.location.href=this.value">
<option disabled="disabled" selected="selected">..după lună:</option>
<option value="#">Ianuarie 2015</option>
<option value="#">Februarie 2015</option>
<option value="#">Martie 2015</option>
<option value="#">Aprilie 2015</option>
</select>
I did not think about trying CSS to achieve this cause I thought that by adding style="display:none;" to my first option tag will hide the value from the box too, but as it appears, it doesn't. You can achieve this by changing my initial code in the question with:
<select class="archive" onChange="window.location.href=this.value">
<option disabled="disabled" selected="selected" style="display:none;">..lună:</option>
<option value="#">Ianuarie 2015</option>
<option value="#">Februarie 2015</option>
<option value="#">Martie 2015</option>
<option value="#">Aprilie 2015</option>
</select>
If i understood your question correctly, i believe what you are trying to do is this. Goodluck
$('.archive option:selected').hide(); //initialise
A much more dynamic approach for all selected elements is below:
$(function(){
$('.archive option:selected').hide(); //initialise
$('.archive').change(function(){
$('.archive option').show(200, function(){
$('.archive option:selected').hide();
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="archive">
<option selected="selected">..după lună:</option>
<option value="#">Ianuarie 2015</option>
<option value="#">Februarie 2015</option>
<option value="#">Martie 2015</option>
<option value="#">Aprilie 2015</option>
</select>
$(function(){
$('.archive option:selected').hide(); //initialise
$('.archive').change(function(){
$('.archive option').show(200, function(){
$('.archive option:selected').hide();
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="archive">
<option selected="selected">..după lună:</option>
</select>
Related
I have a form that has a select field defined like this
The myName[] is like that because there are several repetitions in the sign-up form (the user first defines how many he wants to enter, and then that many forms are generated)
Now I would like to get the selected value using jQuery whenever somethign is selected, but as expected, it won't work: it's trying to get the info from an id, and there's more than one of this id. The result is that it's always getting the content of the first select field with the id it finds. I tried changing the id to a class, but that didn't work.
So how can I get the selected value of the select box that's actually triggering the event?
$(document).ready(function() {
$('#idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
alert(naam);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" id="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
Why can't you just use $(this).val(), if you want the selected Element?
But yes, when you've got multiple of the same ID, jQuery will over ever select the first one it finds - Though you do seem to know this; I've changed it to a class in this demo
$(document).ready(function() {
$('.idOfmyName').on('change', function() {
alert($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="edward">Edward </option>
<option value="vivian">Vivian </option>
</select>
for multiple you can do something like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<script>
$(document).ready(function() {
var names = [];
$('.idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
if($.inArray(naam,names)){
names.push(naam);
}
alert(names);
});
});
</script>
Vanilla JavaScript way to get selected value using onchange method
function getSelectedValue(val) {
alert(val);
}
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>
I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>
I have some issues with options, can someone help me ?
I have a button with id="colorButton" but I don't know how to change his color with options.
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
It can be a javascript answer, jquery... please :(
I have this in script :
$(document).ready(function(){
if ($("#colorSelect").click().val("1"){
$("#testButton").css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But ofc it don't work :(
Your code contains lots bugs, you just need to bind a change event handler and set color based on selected option.
$(document).ready(function() {
$("#colorSelect").change(function() {
$("#testButton").css("color", $(':selected', this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<div id="testButton">button</div>
You need to bind to the change event of the select like:
$(document).ready(function() {
$("#colorSelect").change(function() {
if ($(this).val() == 1) $("#testButton").css("color", "red");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<button id="testButton">button</button>
Everyone is focusing on making your code functional. I put the effort to solve your problem in different way.
Each option has data-color attribute. When you change dropdown then selected option's data-color value get picked and changes color. In this way, you don't need multiple if-else.
$(document).ready(function() {
$('#colorSelect').on('change', function(){
var color = $(this).find(':selected').data('color');
$("#testButton").css("color", color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option data-color='red'>Red</option>
<option data-color='blue'>Blue</option>
<option data-color='green'>Green</option>
</select>
<button id="testButton">button</button>
</form>
I need to remove some options from the 2nd dropdown menu based on the first.
I have tried quite a few iterations to get it done but still it is not working.
Kindly provide with solutions
In the below code I need to remove the option from the 2nd dropdown already selected in the 1st one.
I have tried the mentioned HTML & Javascript Code
HTML
<form>
Source:
<select id = "box1" name="a">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
</select>
Destination:
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
</form>
JAVASCRIPT
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value='a']").remove();
});
}
$(document).ready(main);
I have tried entering the value as variable a with and without quotes but no effect. Although when i replaced 'a' with a specific value like 'Apple', then the code is working.
I think this is your answer ;)
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value="+a+"]").hide().siblings().show();
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="box1" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
Hi kindly check https://jsfiddle.net/RRR0308/uubuumrz/1/
HTML
<select id="box1">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select id="box2">
<option>999</option>
<option>222</option>
<option>888</option>
<option>444</option>
</select>
jQuery
$(document).ready(function(){
$('#box1').on('change', function(){
var x=$(this).val();
$('#box2 option').each(function(){
if($(this).val()==x){
$(this).remove();
}
});
});
});
hide().siblings().show()
instead of.remove()`
The .remove() permanently removes the selected option in box1 from box2. so if you use .hide() and .show(), it would hide and show. try making these changes.
$('#box1').change(function(){
var v = $(this).val();
$('#box2').find("option[value="+v+"]").remove(); });
Try this simple one
I have a drop down list like this:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="ar-jo">Arabic</option>
<option value="en-us">English</option>
<option value="fr-FR">French</option>
<option value="es-cl">Spanish</option>
</select>
If I select "Arabic",the drop down list should display "Arabic". But am always getting "Language".
EDIT
I got the answer by using Viewbag
Script:-
<script type="text/javascript">
$(function () {
$('#ddlLanguage').val("#ViewBag.Msg");
$('#ddlLanguage').change(function () {
$('#currentCulture').val($(this).val());
$(this).parents("form").submit();
});
});
</script>
In the controller i have set value of ViewBag.Msg.
ViewBag.Msg = ddlLanguage
Try with this code
$('#ddlLanguage').change(function(){
alert( $(this).find('option:selected').text());
});
Update your dropdown with code given below:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="Arabic">Arabic</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
Set the selected attribute to selected on the given option.
$("your option").attr("selected", "selected");