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!
Related
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 have a product which has a category, and while editing product I would like to display current category in dropdown ofcourse. And if user wants to change category in dropdown it is ok, but on load I would like to show selected current product's value.
Here is my html
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Products category:</label>
<div class="col-xs-9">
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [value]="helperService.IsItEmptyGuid()" [selected]="isDefaultSelected()">-/-</option>
<option [value]="group.id" *ngFor="let group of mainGroups" [selected]="group.id==='a0e25215-a60e-4444-b6ac-4521b7de4b37'">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
When I run my app and open this form, as you can see I put {{article.mainGroup.id}} <- it's binded article to check is there id of category, and when I open form it looks like this:
So obliviously {{article.mainGroup.id}} holds a value, but I can not force <select> to display that value as selected...
Any help would be awesome, thanks a lot !
EDIT:
It's doing nothing, just selecting -/- if product has no group because then article.mainGroup.id would be empty guid..
isDefaultSelected() {
return this._globalHelperService.isEmptyGuid(this.article.mainGroup.id);
}
EDIT 2: By following Pranay Rana example, here is what I did :
1.) Select article
2.) Open modal
3.) Image when modal is opened:
As you can see, value is there, but nothing is selected in a modal.
Here is original code, not only img:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Group:</label>
<div class="col-xs-9">
<select touch-enter-directive [ref]="ref" [nextFocusElement]="articleSubGroup" id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.mainGroup.id">
<option [ngValue]="null">-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
Probably select2 is making an issue?
Thanks
do like this
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [ngValue]="null" >-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
In angular [select] is not needed it will select option based on id value you pass as [(ngModel)] to select element,also no need of emptyguid if your value is null then default option will get selected
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
In my AngularJS web application,
Plunker : https://plnkr.co/edit/x9uIx5Inkxxt3fqttkkK?p=preview
One of my drop down (First) is not retaining the selected value.
The html code fragment is below.
I know it is something to do with the mapping ng-model="entityPropertyType.propertyId"
The entityPropertyType is a iterated value from the list.
HTML
<div class="form-group" ng-repeat="entityPropertyType in advancedSearch.entityPropertyTypes" >
<label class="control-label col-md-1">Business Card</label>
<div class="col-md-2">
<select class="form-control" ng-model="entityPropertyType.propertyId"
ng-change="businessCardSelected($index, entityPropertyType.propertyId)" >
<option value="">Please select</option>
<option ng-repeat="property in businessCards" value="{{property.propertyId}}">{{property.propertyLabel}}</option>
</select>
</div>
</div>
You should never use ngRepeat to render select options. Use ngOptions directive:
<select class="form-control"
ng-options="property.propertyId as property.propertyLabel for property in businessCards"
ng-model="entityPropertyType.propertyId"
ng-change="businessCardSelected($index, entityPropertyType.propertyId)">
<option value="">Please select</option>
</select>
Demo: https://plnkr.co/edit/v6KbJSkqu5XNz2LUfbrK?p=preview
I have a simple Bootstrap form with a select input:
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
The users now have a requirement to be able to add a new option dynamically to the select menu rather than be restricted to the items on the select menu.
I'm not sure if it's possible to modify a select menu and how to make it consistent with the rest of the Bootstrap framework?
To add an option dynamically, there should be a UI button giving you that choice. To get user input, we can use the window.prompt method.
We then create an option element, set its value attribute and set its name. Then just append these elements and nodes to the DOM with appendChild
Try playing around with this. I added some items like Steak, potatoes and beer.
var addOption = document.getElementById("add-option");
var selectField = document.getElementById("category");
addOption.addEventListener("click", function() {
var item = prompt("What would you like");
var option = document.createElement("option");
option.setAttribute("value", item);
var optionName = document.createTextNode(item);
option.appendChild(optionName);
selectField.appendChild(option);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="category" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8">
<select class="form-control" name="category" id="category">
<option value="Fruit">Fruit</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
<button id="add-option" class="btn btn-primary">Add a new option</button>
You mean something like this?
some select
<select id="region" class="selectpicker">
<option>region 1</option>
<option>region 2</option>
<option>region 3</option>
</select>
jquery js
$('.selectpicker').selectpicker();
$("#region").on('change', function () {
$(this)
.append('<option>region4</option><option>region5</option>')
.selectpicker('refresh');
});