I have two selects with the same values
eg:
<select id="1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
How can I prevent user not to choose the same values on both boxes?
I am populating the select values with PHP from a database.
EDIT:
I arrived on this: jsfiddle
But it needs improvement when changing a value already selected.
First of all HTML and CSS are not designed for something like that.
Said that,maybe you can hack CSS to do something similar but
since <option> inside both <select> haven't any relationship (Child-Parent, Sibling...) you can not use CSS pseudo selector (:checked)to disable options like that:
(this code wont work for this case but it would remove duplicates if the options will be in the same <select> because they would be sibling)
[value="volvo"]:checked + [value="volvo"] {display: none;}
$('#1').change(function() {
$("#2").not($(this)).find("option[value='" + $(this).val() + "']")
.prop("disabled", true)
.siblings().removeAttr('disabled');
});
Fiddle
You can remove the siblings part if you don't want to re-enable previously selected options.
$( document ).ready(function() {
$(function(){
$('select').change(function() {
$current=$(this);
$("select").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
});
});
});
I arrived on what I wanted. https://jsfiddle.net/zrr9ngj8/2/
Related
how do you use the select tag in html as a navigation?
<select>
<a><option></option></a>
</select
I have tried putting the a tag outside the option tag but it still won't work
Thank you in advance!
Hi #Ivan,
You cannot use the tag inside a element in HTML.
You can use switch statement in JavaScript with window.location = "your link" to achieve that kind of functionality
First create your selection tag with the ID and add event on that tag like this <select name="cars" id="cars" onChange="SelectRedirect()"></select>
now use JavaScript to achieve that. I'm using switch statement.
function SelectRedirect() {
switch (document.getElementById("cars").value) {
case "volvo":
window.location = "page";
break;
case "saab":
window.location = "login";
break;
default:
window.location = "../";
break;
}
}
<div>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" onChange="SelectRedirect()">
<option value="volvo">volvo</option>
<option value="saab">Saab</option>
</select>
</div>
The another way you can do that with onchange event.
<select onchange="window.location = this.value;">
<option value="">Your page</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
<option value="page3.html">Page 3</option>
</select>
I have created a dropdown menu in html. I have a reset button which resets all the value to null. But on clicking this I need to reset the dropdown menu to the first value which I gave in the field.
Please help...
The code for the dropdown is as below.
<select name="abc" id="abc">
<option value="one">One
<option value="two">Two
</select>
But on clicking Reset I am getting a blank in the dropdown list from where i have to again select either One or Two.
Instead I want it to automatically set to the value "One".
You can use add the attribute selected to the option you want to be default like this:
<select name="abc" id="abc">
<option value="one">One</option>
<option value="two" selected>Two</option>
</select>
Or add selected="selected":
<select name="abc" id="abc">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
</select>
You just need to use the selected attribute for the item that you want to be the default:
<select name="abc" id="abc">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
</select>
If you are manually performing the reset, you'll likely want to store a reference to the current selection prior to resetting them and using that to retain the previous selection, which you can access via the selectedIndex property. Depending on your use case and technology (e.g. jQuery, etc.), you can select a specific element by its index, value, or potentially other attributes.
You can add selected attributes to make default select.
<select name="abc" id="abc">
<option value="one">One
<option value="two" selected="selected">Two
</select>
With jquery
$("#abc").val("two")
use selected
here live example https://www.w3schools.com/tags/att_option_selected.asp
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
I think you need this code in your reset jquery function.
$("#abc option:selected").prop("selected", false);
$("#abc option:first").prop("selected", "selected");
HTML select drop down by default shows first option if none of the option is selected. So, effectively you just need to clear the selected attibute for your dropdown.
function clearForm(form) {
//var $f = $(form);
//var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
//$('#msg').empty();
$('#abc option:selected').removeAttr('selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="abc" id="abc">
<option value="one">One
<option value="two" selected>Two
</select>
<input type='button' class="btn btn-primary" value='Reset' name='reset' onclick="return clearForm(this.form);">
Is it possible to get a multiple select box to behave like a select box in the following way: Only show selection box (1 row) and expand when clicked?
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
but I only want to see the empty 1 row select box until clicked and then have it expand as a dropdown with scroll bar if needed
I hope CSS is enough to solve your problem. Try something like this.
select{height:20px}
select:focus{height:auto}
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This accomplishes what you are looking for at a very basic level using jQuery. All options are initially hidden with CSS except the first option. Using jQuery, once the first option is clicked, then the remaining options will display.
Working Example: https://jsfiddle.net/byronj/fmvufoxz/4/
**HTML:**
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
**CSS:**
select option {
display: none;
}
select option:first-of-type, .show {
display: block;
}
**jQuery:**
jQuery(document).ready(function ($) {
$('option').on( "click", function() {
$('option').show();
});
});
I believe what you are trying to do can be accomplished by:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try running the above snippet and see if that's what you were looking for.
Hope that helped!
How to set the first value that comes in the dropdown list as the default value in php? The first value should be by default selected when i open my page
This can be achievable using selected attribute of selectbox:
<select name="youselectbox">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Edit :
Give your selectbox a id say "selectme"
<select name="youselectbox" id="selectme">
Then on load use this jQuery :
$(document).ready(function()
{
$("#selectme").prop("selectedIndex", 0); // here 0 means select first option
});
For more information SEE and FIDDLE DEMO
With selected attribute within the option tag, you set the selected default value of your drop-down.
<select>
<option value="volvo" selected>Volvo</option> # default selected option
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
EDIT :
For Dynamic Drop-down menu: PHP Code as below
$("#target option:first").attr('selected','selected');
When setting attr selected doesn't work if there's already a selected attribute. The code I use now will first unset the selected attribute, then select the first option.
$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don't want it to show a Select language option, because it's not an actual option.
How can I achieve this?
Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML.
Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder.
Something like:
<option selected disabled>Choose here</option>
The complete markup should be along these lines:
<select>
<option selected disabled>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
You can take a look at this fiddle, and here's the result:
If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden attribute like so:
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check the fiddle here and the screenshot below.
Here is the solution:
<select>
<option style="display:none;" selected>Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
The proper and semantic way is using a placeholder label option:
Add an option element as the first child of the select
Set value= "" to that option
Set the placeholder text as the content of that option
Add the required attribute to the select
This will force the user to select another option in order to be able to submit the form, and browsers should render the option as desired:
If a select element contains a placeholder label option, the user
agent is expected to render that option in a manner that conveys that
it is a label, rather than a valid option of the control.
However, most browsers will render it as a normal option. So we will have to do fix it manually, by adding the following to the option:
The selected attribute, to make it selected by default
The disabled attribute, to make it non-selectable by the user
display: none, to hide it from the list of values
select > .placeholder {
display: none;
}
<select required>
<option class="placeholder" selected disabled value="">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Because you can't use assign placeholders for select tags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:
<select>
<option disabled="disabled">Select language</option>
<option>Option 1</option>
</select>
"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.
I hope that helps.
Try this:
<div class="selectSelection">
<select>
<option>Do not display</option>
<option>1</option>
<option>1</option>
</select>
</div>
In the CSS:
.selectSelection option:first-child{
display:none;
}
I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:
HTML:
<span id="default_message_overlay">Default message</span>
<select id="my_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
CSS:
#default_message_overlay {
position: absolute;
display: block;
width: 120px;
color: grey;
}
select {
width: 150px;
}
Javascript (with JQuery):
$(document).ready(function() {
// No selection at start
$('#my_select').prop("selectedIndex", -1);
// Set the position of the overlay
var offset = $('#my_select').offset();
offset.top += 3;
offset.left += 3;
$('#default_message_overlay').offset(offset);
// Remove the overlay when selection changes
$('#my_select').change(function() {
if ($(this).prop("selectedIndex") != -1) {
$('#default_message_overlay').hide();
}
});
});
I've made a jsfiddle for demo. Tested with Firefox and IE8.
To answer your question directly use this code on the option you do not want it to appear in option list:
<option value="" hidden selected>Select Language</option>
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>
you can of course move the css to a css file if you want, and put a script to catch the esc button to select the disabled again. Unlike the other similar answers I put value="", this is so if you send the value(s) of your select list with a form, it won't contain "chose something". In asp.net mvc 5 sent as json compiled with var obj = { prop:$('#ddl').val(),...}; and JSON.stringify(obj); the value of prop will be null.
Op1:
$("#MySelectid option").each(function () {
if ($(this).html() == "text to find") {
$(this).attr("selected", "selected");
return;
}
});
Op2:
$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; }).attr('selected','selected');