I have 2 selects with same names. One is displayed, and the other is hidden.
<select name="city" style="display: none;">
<option value="notSend">foo</option>
</select>
<select name="city">
<option value="send">foo</option>
</select>
How can I send only select, which are displayed?
You can use HTML disabled attribute to disable <select> and hide that element using Jquery hide method
Example: http://jsfiddle.net/zZTMd/
Note: Don't forget to include JQuery library file
Disable the code which should not be send.
Disable the HTML like this without removing the code:
<!--select name="city" style="display: none;">
<option value="notSend">foo</option>
</select-->
<select name="city">
<option value="send">foo</option>
</select>
Related
When I add display:none to an <option> tag with JavaScript after the page is ready, it wouldn't hide the default or the selected element, it stays on the hidden option unless I change that manually. The option 08:30 is hidden but it's still there as selected, but not an option.
Here is the HTML and there's also a screenshot:
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;">08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I've tried disabling the <option> tag as well but it does the same and keeps it selected. I need it to jump into an active select option or any other option but not the one I hide or disable.
Update:
I have to use a workaround to get this working. First I've added all <option> tags to the <select> tag, then remove the ones that I don't want:
$('#time').html('
<option value="08:30">08:30</option>
<option value="08:45">08:45</option>
<option value="09:00">09:00</option>
<option value="09:15">09:15</option>
<option value="09:30">09:30</option>
<option value="09:45">09:45</option>
')
$('#time option[value="'09:00'"]').remove()
This works, although doesn't actually solve the issue (I guess that's a bug and hasn't been addressed yet). I would still appreciated an answer to improve the code.
Hello & Welcome Mohsen Salehi,
<option hidden>Hidden option</option>
It is not supported by IE < 11.
Please read more about it here How to hide a in a menu with CSS?
Edit:
You can also add disabled to prevent getting selected.
<div class="form-floating mb-3">
<select class="form-select" id="time">
<option value="08:30" style="display: none;" disabled>08:30</option>
<option value="08:45">08:45</option>
</select>
</div>
I already apply <Required> tag in HTML <Select> but not working. The form is still able to proceed to the next step even not select anything at first step. Anyone know to solve it?
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Have you declared your web page using HTML5? Make sure you declare the following statement at the beginning of the page
<!DOCTYPE html>
The required attribute is only available in HTML5 and only supported by specific browsers... w3schools Required Attribute
Having tested your original code in HTML5, it works.
You could get rid of the select option tag entirely, and place the value select option in the select tag itself.
<label>Region:</label>
<select value="Select Option" id="Region" class="custom-select form- control" required>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Your code works it depends on the browser you use or the way that you are using it. I wrote a sample code for you. Hope it may help you:
<!DOCTYPE html>
<html>
<body>
<form >
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<input type="submit">
</form>
</body>
</html>
So in the code above if you do not choose anything it will not let you submit.
I don't know which type of input this is, What do I have to put in the type=""?
Drop down menus can be created in HTML using the select and option tags. The format looks something along the lines of this:
<select name="foo">
<option value="int">INT</option>
<option value="varchar">VARCHAR</option>
...
</select>
What you are seeing there is a select input with optgroup being used.
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<option>Tyrannosaurus</option>
<option>Diplodocus</option>
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
Check out the MDN web docs for it.
Does dropdown element support "required=true" attribute? I have a usecase where I want users to compulsorily select a dropdown option, but by default I don't not want to prompt any of the options.
If not, why not?
Yes, it does have required attribute. See below snapshot.
<form>
<select required="required">
<option value="">None</option>
<option value="Test1">Test1</option>
<option value="Test2">Test1</option>
</select>
<input type="submit">
</form>
Documentation
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Is there a way to remove the scroll bar in a select element with the 'multiple' attribute enabled?
<select name="test" multiple>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
You should not remove it actually for accessibility reasons. If you do so, it would look like a textarea rather than a multi selectbox.