What I'm trying to achieve here is this: I have a select input that has 3 options : Sale, Rent, Wanted. Depending on which option is selected, there are 3 other select inputs. So lets say I choose Sale then it should show the property sale select input and hide the other two, if I choose Rent then it should show the property rent select input and the hide the other two.
The hiding works well but my issue is when i submit for search using GET, it passes the data of the two other hidden select inputs because they are not disabled. I tried disabling them depending on selection as shown in the below code but it didn't work. Any help?
Here is my code:
<script type="text/javascript">
$('#type').on('change',function(){
if( $(this).val() === "sale"){
$("#propertyrent").hide();
$("#propertywanted").hide();
$("#pricetype").show();
$("#propertysale").show();
document.getElementById("propertyrent").disabled=true;
document.getElementById("propertywanted").disabled=true;
}
else if( $(this).val() === "rent"){
$("#pricetype").hide();
$("#propertyrent").show();
$("#propertywanted").hide();
$("#propertysale").hide();
document.getElementById('propertysale').disabled=true;
document.getElementById('propertywanted').disabled=true;
}
else if( $(this).val() === "wanted"){
$("#pricetype").hide();
$("#propertyrent").hide();
$("#propertywanted").show();
$("#propertysale").hide();
document.getElementById('propertyrent').disabled=true;
document.getElementById('propertysale').disabled=true;
}
});
</script>
<label class="col-sm-3 control-label">Type</label>
<select name="type" id="type">
<option value="sale">Sale</option>
<option value="rent">Rent</option>
<option value="wanted">Wanted</option>
</select>
<div id="propertysale">
<label class="col-sm-3 control-label">Property</label>
<select name="propertysale" id="propertysale" class="form-control col-sm-12">
<option value="all">Any</option>
<option value="houses">Houses</option>
<option value="apartments">Apartments</option>
<option value="land">Land</option>
<option value="buildings">Buildings</option>
<option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
</select>
</div>
<div id="propertyrent" style="display:none;">
<label class="col-sm-3 control-label">Property</label>
<select name="propertyrent" id="propertyrent" class="form-control col-sm-12">
<option value="all">Any</option>
<option value="houses">Houses</option>
<option value="apartments">Apartments / Flats</option>
<option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
</select>
</div>
<div id="propertywanted" style="display:none;">
<label class="col-sm-3 control-label">Property</label>
<select name="propertywanted" id="propertywanted" class="form-control col-sm-12">
<option value="all">Any</option>
<option value="houses">Houses</option>
<option value="apartments">Apartments</option>
<option value="land">Land</option>
<option value="buildings">Buildings</option>
<option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
</select>
Use jQuery selector for any input inside div to disabling them:
$("#yourDiv input, #yourDiv select").prop("disabled", true);
To remove disabled: prop("disabled", false);
here div and your selectbox id is same 'propertyrent','propertywanted','propertysale' change this.
and when you hide or disable selectbox set value blank of select box
The problem is, you are not disabling the select menu. You are disabling the div that contains the select menu
<div id="propertyrent" style="display:none;">..
<select name="propertyrent" id="propertyrent" c...
Use different id for both. It will work
Related
I have an inventory form which I have been asked to improve. The user counts product and enters the new count into the form. Then, depending on whether the input is positive or negative, a select box appears with the list of reasons for the discrepancy. The UI is working perfectly, but the reason code will only pass for whichever select element is listed last.
Basically this works to ensure the user is entering negatives correctly so my default is to have the SELECT element for the negative reason second since it will be the one to work. I would appreciate any suggestions for a better approach.
$(document).ready(function () {
if ($("#invAmt").val()=='') {
$("#plus").hide();
$("#minus").hide();
}
//return false;
$(document).on('change', '#invAmt', function() {
if ($("#invAmt").val()>='1') {
$("#plus").show();
$("#minus").hide();
} else {
$("#plus").hide();
$("#minus").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="invDec">Enter Amount of Units to Adjust (+/-): </label>
<input name="invAmt" id="invAmt" style="width:50px" >
</div>
<label for="title">Reason for Adjustment:</label>
<div class="plus">
<select class="custom-select custom-select-md" name="reason" id="plus" style="width:370px">
<option value="">--- Select Reason ---</option>
<option value="30">Returned Product</option>
<option value="50">Other (explain in notes)</option></select>
</div>
<div class="minus">
<select class="custom-select custom-select-md" name="reason" id="minus" style="width:370px">
<option value="">--- Select Reason ---</option>
<option value="70">Recount (lost)</option>
<option value="75">Dumped / Died)</option>
<option value="90">Diseased / Pest</option>
<option value="65">Overgrown</option>
<option value="95">Overstock</option>
<option value="98">Loaned Out</option>
<option value="100">Other (explain in notes)</option></select>
</div>
if you want to select multiple options from your drop downs you need to add the "multiple" attribute to your two select statements. Like this:
<select class="custom-select custom-select-md" multiple name="reason" id="plus" style="width:370px">
also, you need to add a submit button.
If you are trying to get just one option for + and one option for - you need to use different names for each of your select boxes. If they are both name='reason' the last one will overwrite the first one. Try:
name='negReason'
name='posReason'
The below is my 3 drop down section.I want to change in the 3rd drop down which having the values AND/OR. After changing the drop down there will be another clone of all the 3 same drop down filed will come and condition is only in the clone section for first select field the value shouldn't be there which was previously chosen(If I choosen Category in first select, then in the clone section for first select field there willn't be any Category section).
Also as per there is 3 option value in first select and those are (Category, Genre and Cast), so while on changing the AND/OR section we can only clone 2 more div, except the first one.
Also, if we already chosen Category section in first section and then we choose AND/OR option field then other 2 option will vanish from the first select field. Similarly it will proceed like this
I have got some how to clone it, but can't do exactly what our requirement. Below is my HTML and js code.
**HTML**
<div class="radio">
<input type="radio" id="test2" name="specific_content" value="2">
<label for="test2">
<div class="col-md-4">
<select class="form-control" id="content-form" name="content_form">
<option selected disabled hidden>Select</option>
<option value="category">Category</option>
<option value="genre">Genre</option>
<option value="cast">Cast</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control content-type-section" id="content_type" name="content_type" disabled="disabled" onchange="removeDisableFromCondition(this)">
<option selected disabled hidden>Select</option>
<option value="123">Movie</option>
<option value="321">TV</option>
<option value="345">Cast</option>
<option value="987">Genre</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control condition-section" id="sel1" name="conditions" disabled="disabled" onchange="showAnotherSection()">
<option selected disabled hidden>Select</option>
<option value="1">AND</option>
<option value="2">OR</option>
</select>
</div>
<div id="cloned_copy">
</div>
JS
$(document).ready(function() {
$('#sel1').change(function() {
var selectedVal = $('#content-form').val();
var target = $("#cloned_copy");
target.empty();
$("#content-form").clone().appendTo(target);
$("#cloned_copy option[value='"+ selectedVal +"']").remove();
});
});
After choosing AND/OR select drop down
I am building a search result filtering feature. I have a number of select2 dropdown boxes where the user can select multiple values from to either hide or show divs with matching class values. I have a number of divs with classes containing values matching values in the select2 dropdown boxes. How do I go about coding this functionality?
I can only get this to work for one selection, I'd like to be able to select multiple options from the dropdowns.
$('select.filterCandidates').bind('change', function() {
$('select.filterCandidates').attr('disabled', 'disabled');
$('#candidates').find('.row').hide();
var critriaAttribute = '';
$('select.filterCandidates').each(function() {
if ($(this).val() != '0') {
critriaAttribute += '[data-' + $(this).data('attribute') + '*="' + $(this).val() + '"]';
}
});
$('#candidates').find('.row' + critriaAttribute).show();
$('#filterCount').html('Showing ' + $('div#candidates div.row:visible').length + ' Matches');
$('select.filterCandidates').removeAttr('disabled');
});
$('#reset-filters').on("click", function() {
$('#candidates').find('.row').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<br>
<h4>Search Form</h4>
<br>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="type" class="form-control filterCandidates" data-attribute="type">
<option value="0">Candidate Type</option>
<option value="CA">CA</option>
<option value="CFA">CFA</option>
<option value="CFO">CFO</option>
<option value="CIMA">CIMA</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="role" class="form-control filterCandidates" data-attribute="role">
<option value="0">Preferred Role</option>
<option value="Analyst">Analyst</option>
<option value="Associate">Associate</option>
<option value="CFO">CFO</option>
<option value="FD">FD</option>
<option value="FM">FM</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="roleType" class="form-control filterCandidates" data-attribute="roleType">
<option value="0">Preferred Role Type</option>
<option value="Permanent">Permanent</option>
<option value="Contract/Interim">Contract/Interim</option>
<option value="Internship">Internship</option>
</select>
</div>
</div>
</div>
just to give you a rough idea as you have not provided any code.
<script>
var SelectedValues = $('#ddlSelect option:selected');
var NotSelectedValues $('#ddlSelect option:not(:selected)');
$(SelectedValues ).each(function () {
$("."+$(this).val()+"").show(); //show all those divs containing
//this class
});
$(NotSelectedValues ).each(function () {
$("."+$(this).val()+"").hide();//hide all those divs containing
//this class
});
</script>
This is a rough idea , The above script will show all of the divs containing the classes you have selected in your select2 with id "ddlSelect" and hide those which you have not selected.
you can put this into a function and call it on onchange event of ddlSelect or whatever and however you want it to.
I want to make my 2 <select> change their values based on a single <select>, for example:
I want my kodethnajaran and kodesemester change their options value based on my selection on kodematkul.
Here is my code:
<div class="form-group">
<label>Mata Kuliah</label>
<select class="form-control" name="kodematkul" id="kodematkul" required>
<option value="null" selected="selected">-- Pilih --</option>
<option value='mk001'>Mobile Programming</option>
<option value='mk003'>Matematika Dasar</option>
<option value='mkl001'>Logika dan Pemrograman</option>
</select><br>
</div>
<div class="form-group">
<label>Tahun Ajaran</label>
<select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='thn001'class='mk001'>2017</option>
<option value='thn001'class='mk003'>2017</option>
<option value='thn001'class='mkl001'>2017</option>
<option value='thn002'class='mk003'>2016</option>
</select><br>
</div>
<div class="form-group">
<label>Semester</label>
<select class="form-control" name="kodesemester" id="kodesemester" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='sem002'class='mk001'></option>
<option value='sem001'class='mk003'></option>
<option value='sem001'class='mkl001'></option>
<option value='sem002'class='mkl001'></option>
<option value='sem002'class='mk003'></option>
</select><br>
</div>
The code above basically contains only my <select>, with data from sql. The script that I tried is:
$("#kodethnajaran,#kodesemester").chained("#kodematkul");
I'm not sure if this is applicable, because I tried to implement it based on this demo:
http://www.appelsiini.net/projects/chained/demo.html
it seems it can only change 'kodethnajaran' but doesnt change 'kodesemester' value.
Here's the fiddle...
https://jsfiddle.net/vu671ubm/
Ok so I investigated a little and the reason why your solution was not working as in example was jQuery version, You should use 1.10 to have chained working
Here goes codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111
Also I have changed your code a little to work on classes
$(".form-control").each(function() {
$(this).chained($("#kodematkul"));
});
The class I have used is just an example, you can add new class for all selects that need to depend on given one. For example dependant-select and add this class to all select which should change on the first one update
So I need to entirely change a group of drop downs that appear based on the selection of one dropdown. I believe ngChange is the way to go about it, but I am not entirely sure how to change between two sets of divs (or if that is even the best way of doing it.
So I have this dropdown:
<div class="input-group" theme="bootstrap" style="">
<label>Product Type</label>
<select class="dropdown-menu scrollable-menu form-control" style="" ng-model="event.etype" ng-change="setOptions()" id="etype">
<option value="" selected disabled>Select a Product</option>
<option ng-click="type = 'x'">X</option>
<option ng-click="type = 'y'">Y</option>
<option ng-click="type = 'z'">Z</option>
<option ng-click="type = 'q'">Q</option>
<option ng-click="type = 'w'">W</option>
</select>
</div>
If the choice is X, I need one set of drop downs (contained in one row), and if it is anything else, I need an entirely different set (contained in another row).
Here are how the drop downs look:
<div class="col-lg-3">
<label>Numbers</label>
<ui-select-match placeholder="Select Numbers">{{$item.admin_user.name}}</ui-select-match>
<ui-select-choices repeat="a in ams"> {{a.admin_user.name}} </ui-select-choices>
</ui-select>
</div>
</div>
<div class="row col-lg-12" id="nonX">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Super Heroes</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="superhero" id="script">
<option value="" selected disabled>Select Superhero</option>
<option ng-repeat="superhero in superheroes" ng-value={{superhero}} ng-click="selectHeroe(superhero)">{{superhero.name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row col-lg-12" id="noniPad">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Screen</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.screen" id="screen">
<option value="" selected disabled>Select Screen</option>
<option ng-repeat="screen in screens" ng-value={{screen}} ng-click="selectScreen(screen)">{{screen.name}}</option>
</select>
</div>
</div>
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Misc Asset</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.miscasset" id="miscasset">
<option value="" selected disabled>Select Misc Asset</option>
<option ng-repeat="miscasset in miscassets" ng-value={{miscasset}} ng-click="slectMiscAsset(miscasset)">{{miscasset.name}}</option>
</select>
</div>
</div>
</div>
<div class="row m-b-sm m-t-sm"></div>
</div>
The separate drop downs both appear in different rows. So I would need one row to appear if they select iPad and one row to appear if they do not select an iPad.
I would love some help. Thank you!
Your best option would be to set the dropdowns of each one depending on the parent selection. There's no need to create a duplicate div to hold both sets of dropdows.
I removed all css classes and any other markup not relevant to the ng-change to make it clearer.
Your parent dropdown would look like this:
<div>
<label>Product Type</label>
<select ng-model="event.etype" ng-change="setOptions(event.etype)">
<option value="">Select a Product</option>
<option ng-repeat="etype in etypes" ng-value="etype" ng-bind="etype"></option>
</select>
</div>
Take special notice of how the setOptions handler is being passed the ng-model value. This means when an option is selected, it'll automatically set ng-model="event.etype" to the value of that option.
To support this behavior in your controller you need to provide the array of event types:
$scope.etypes = ['gif', 'photo', 'ipad', 'video', 'print'];
Then, on your setOptions method you'll get the selected option and filter your descendant dropdowns
var options1 = [{
etype: 'ipad',
value: '1'
}, {
etype: 'gif',
value: '2'
}];
$scope.setOptions = function (etype) {
$scope.scripts = options1.filter(function (item) {
return item.etype == etype;
});
};
What this means is that setOptions will set the descendant dropdowns based on the etype value passed in. In this example I'm limiting to $scope.scripts only but you can set as many as needeed. As you can see options1 is just an array which contains the etype property which I need to filter against.
Finally on your descendant dropdowns you would use the filtered options:
<select ng-model="event.script">
<option value="" selected disabled>Select Script</option>
<option ng-repeat="script in scripts" ng-value="script.value" ng-bind="script.value"></option>
</select>
Using ng-hide="event.etype == null || event.etype=='ipad'" and ng-show="event.etype == 'ipad'" on the row tags solved my issue!