I have some dropdown boxes in my webpage. I want user to select them one by one, update next dropdown options based on this dropdown selected option. I use semantic ui so it looks better and have a searching function. I know semantic ui have a class to make dropdown disabled.
My problem is how can i enable or disable the dropdowns with javascript. I tried adding or removing the class, but it does not work. or it is not possible to do that?
<select name="subject" id="subject" class="ui search dropdown disabled" >
<option value="">Subject</option>
</select>
$('#subject').removeClass('disabled');
I have some dropdown boxes in my webpage. I want user to select them one by one, update next dropdown options based on this dropdown selected option. I use semantic ui so it looks better and have a searching function. I know semantic ui have a class to make dropdown disabled.
My problem is how can i enable or disable the dropdowns with javascript. I tried adding or removing the class, but it does not work. or it is not possible to do that?
<select name="subject" id="subject" class="ui search dropdown disabled" >
<option value="">Subject</option>
</select>
$('#subject').removeClass('disabled');
8 Answers
Reset to default 6The jquery way works. here is an example...
$('.dropdown').dropdown();
$('.ui.dropdown').addClass("disabled");
https://jsfiddle.net/anwar3606/n31xsjzn/
If in case anybody wanted to enable dropdown which was disabled
To disable dropdown
$('.ui.dropdown').addClass("disabled");
To enable dropdown back
$('.ui.dropdown').removeClass("disabled");
mfunction disable() {document.getElementById("mySelect").disabled=true; } function enable() {document.getElementById("mySelect").disabled=false; }
That should be able to enable and disable a dropdown box. Now all you need to do is read the answer and enable/disable accordingly.
var a = document.getElementById("thedropdown"); alert(a.options[a.selectedIndex].value);
should get you the value of the dropdown menu if it is set up like
<select id="thedropdown"> <option value="1">one</option> <option value="2">two</option> </select>
Here is the jQuery way:
$("#subject").prop("disabled", true);
I tried all the solutions mentioned here but nothing did work.
Reason
Behind the scene, semantic-ui generates a dropdown on runtime, and your HTML select tag is put inside that generated HTML div. Hence $('.ui.dropdown').addClass("disabled"); only disable the inner HTML not the actual piece of HTML code that renders that dropdown to user.
Solution
Hence to disable the dropdown (outer HTML tag) do the following:
$('.ui.dropdown').parent().addClass("disabled");
Good explained Sachin. As you say using Semantic UI aparently is not enough to enable or disable with .prop("disabled", true) or .prop("disabled", false); As in my situation I used more than one dropdown, it turned out as follows..
First disable the Dropdowns by element id:
$("#person_state_id").prop("disabled", true);
$("#person_city_id").prop("disabled", true);
And when I want to enable, using .parent() or .parent('div') same results.
$("#person_state_id").parent('div').removeClass('disabled');
$("#person_state_id").prop("disabled", false);
$("#person_city_id").parent().removeClass('disabled');
$("#person_city_id").prop("disabled", false);
In some cases I did it in the following "generic" way.
$(".field.disabled").removeClass("disabled");
or more specific:
$(".field.city").removeClass("disabled");
I had to inspect the html elements and work with the form view, because when enabling and disabling the affected one was the <div class = "field">, Total, it all depends on how you have your View.
My form view: ...
<div class="field country">
<%= form.label :country_id %>
<%= form.collection_select :country_id, @countries,:id, :name, options = {:prompt => 'Please select a Country...'},
html_options = {class: "ui fluid search selection dropdown"}%>
</div>
<div class="field state">
<%= form.label :state_id %>
<%= form.collection_select :state_id, @states, :id, :name, {:prompt => 'Please select a Country first...'},
html_options = {class: "ui fluid search selection dropdown"} %>
</div>
<div class="field city">
<%= form.label :city_id %>
<%= form.collection_select :city_id, @cities, :id, :name, {:prompt => 'Please select a Country and State first...'},
html_options = {class: "ui fluid search selection dropdown"} %>
</div>
...
Sorry, thats what I have. I know its sounds weirdo, but Thats the way works for me.
Welcome any another suggestion, I'm kinda lost with this subject too.
If you're trying to disable the input so that it won't be posted on a form submit, then you need to also disable the select element in the dropdown by adding the "disabled" property:
$('.ui.dropdown select').prop('disabled', true);
If you only add a .disabled class to the dropdown, you won't be able to select a different value, but the value it will still be posted on form submit. If that's what you want, then one of the answers is all you need.
But again, to disable the form control and prevent a form post, you have to do both:
$('.ui.dropdown').addClass('disabled');
$('.ui.dropdown select').prop('disabled', true);
My solution (for me)
<div class="ui three column grid">
<div class="row">
<div class="five wide column">
<div class="ui fluid labeled input">
<div class="ui label"> Statut </div>
<select class="ui fluid corner selection dropdown" name="statut" id="statut" required/>
<option value="">Statut</option>
<option value="Titulaire">Titulaire</option>
<option value="Contractuel ou Stagiaire">Contractuel / Stagiaire</option>
</select>
<div class="ui corner orange label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
<div class="five wide center aligned column">
<div class="ui fluid labeled input">
<div class="ui label"> Origine </div>
<div class="ui selection dropdown" name="MinOri" id="MinOri" required>
<input type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Origine</div>
<div class="menu">
<div class="item" data-value="value1">value1</div>
<div class="item" data-value="value2">value2</div>
</div>
<div class="ui corner orange label">
<i class="asterisk icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('statut').addEventListener('change', function() {
if (this.value == 'Titulaire') {
document.getElementById("MinOri").classList.remove("disabled");
} else {
document.getElementById("MinOri").classList.add("disabled");
}
});
</script>