I have two dropdowns (select in HTML), when I select the option in the first dropdown it has to fill the second according to the id of the selected item of the first. It's doing well at removing all the previous options and filling with the id selected in the first dropdown, however it's not removing the text appearing as selected. I'm stuck at the version 1.11 of Jquery if it matters somehow. I've tried doing this both through Jquery and Javascript.
Here is the html code where the selects are:
<div class="ui-grid-a">
<div class="ui-block-a uf">
<label for="cpEstado" class="select">
<select name="estado" id="cpEstado" data-theme="c"> <!--onchange="appUsuario.buscarCidades( this.value );">-->
<option value="" disabled selected>UF</option>
</select>
</label>
</div>
<div class="ui-block-b cidade">
<label for="cpCidade" class="select">
<select name="cidade" id="cpCidade" data-theme="c">
<option value="1" disabled selected>Cidade</option>
</select>
</label>
</div>
Here is the Jquery function I used to fill the second dropdown:
$(document).on('change', '#cpEstado', function() {
$('#cpCidade').empty();
appUsuario.buscarCidades( this.value );});
When I changed the text of the selected text,
$("#cpCidade option:selected").html('Mudança de valor');
This happened. It changes the text of the item in the dropdown but not in the selected item:
You should be setting the value of the second dropdown (instead of setting the html content of the selected option):
$("#cpCidade").val('{id}');
Where id = the value of 'Mudança de valor'
Related
I am making a dropdown and want to show the div class="residential-options" when the id="residential" is selected and show the div class="commercial-options" when the id="commercial" is selected.
heres my HTML:
<div class= "row">
<select id='building-type'>
<option disabled selected value> -- select an option -- </option>
<option id="residential" value="residential" [...]>Residential</option>
<option id="commercial" value="commercial " [...]>Commercial</option>
<option id="corporate" value="corporate" [...]>Corporate</option>
<option id="hybrid" value="hybrid" [...]>Hybrid</option>
</select>
</div>
<div class="residential-options">
<div id="number-of-apartments" >
<label>N. of Apartments *</label>
<input [...]>
</div>
<div id="number-of-basements" >
<label>N. of Basements *</label>
<input [...]>
</div>
</div>
<div class="commercial-options">
<div id="number-of-floors" >
<label>N. of Floors *</label>
<input [...]>
</div>
heres my jQuery:
$("#building-type").change(function() {
($('#residential').is(':checked'))
$('.residential-options').show();
$('.commercial-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide()
});
$("#building-type").trigger("change");
$("#building-type").change(function() {
($('#commercial').is(':checked'))
$('.commercial-options').show();
$('.residential-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide()
});
$("#building-type").trigger("change");
it only shows the div class="commercial-options" whatever I click on. Thanks for your help!
Your code can be simplified greatly, including removing the .trigger() calls.
$("#building-type").change(function() {
$('div[class*="options"]').hide(); // hide all '*-option' divs
// Determine which option was selected and display the corresponding div:
['residential', 'commercial', 'corporate', 'hybrid'].forEach(function(base){
if ($('#' + base + ':checked').length) {
$(`.${base}-options`).show();
}
})
})
you can change your code to something like this:-
get the selected value from the building type .
compare the value using if, else if statements and inside if / else if statements show and hide your div's using class attribute.
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
"Can any body just let me know to call a function on change of select box inside ng-repeat, which sends back data that is available for second select box below first but not for all"
suppose I have 2 products
product 1
select1-on change of this
select2-this should change
product2
select1-on change of this
select2-this should change
but whats happening is
product 1
select1-on change of this
select2-is changing
product2
select1-
select2-this is also changing
can anybody help me with this?
I have a ng-repeat loop in which I have 2 select boxes, for first select box I am getting data from api call, when user changes any option from first select box I have to get code and match with its code entire data and supply options to second select box.
But the main problem entire thing I am looping in side ng-repeat so if there are 2 products or more on select of first select box from first product it changing all second select box data for all products.
Here is my code
<div class="" ng-repeat="product in products ">
<div ng-show="IsVisible" class="form-group row sub-div vsub-div-fw">
<div class="col-sm-6 fd">
<p class="cust-label" for="pay_opt">Select a plan.</p>
<select ng-change="getPaymentOptions(orders.selectedSub[$index],index)" ng-init="orders.selectedSub[$index] = product.recurrence[0].code" ng-model="orders.selectedSub[$index]" ng-options="sub.code as sub.name for sub in product.recurrence " class="input-lg form-control select-community-list" id="pay_opt">
<!-- <option value="">Select Subscription Plan</option> -->
</select>
</div>
</div>
<div class="form-group row sub-div vsub-div-fw">
<div class="col-sm-6 fd">
<p class="cust-label" for="">Select a payment option.</p>
<select required="required" ng-model="orders.selectedPayment[$index]" class="input-lg selectPaymentOption paymentOption{{$index}} form-control" id="" >
<option ng-init="orders.selectedPayment[$index] = product.payment_options[0]" ng-repeat="opt in product.payment_options" value="{{opt}}" class="myPaymentBox">{{opt.split("_").join(" ") }}</option>
</select>
<p id="paymentOptionErr{{$index}}" class="alert alert-danger product-error-msg"><i class="fa fa-exclamation-triangle"></i> Please select payment option to proceed.</p>
</div>
</div>
js code
$scope.getPaymentOptions=function(plan,i){
angular.forEach($scope.products,function(p){
angular.forEach(p.recurrence,function(r){
if (r.code==plan) {
p.payment_options=r.payment_type;
$scope.orders.selectedPayment[i] = r.payment_type[0];
};
});
})
}
The above function is called when we change first select box, to get options for second select box. but when we have more products, changing product one's first select box will change all second select box options. how to make unique on change function?
I need to clear the mutiple selected items of a div as soon as I hit a select button with onChange event as below.
<div ng-show="currentDetails.type=='product_available_in_order'">
<label> Product Filters : </label>
<div style="padding-left: 10px;">
<label>Products Group</label>
<br/>
<select ng-model="currentDetails.settings.product_filters.group" onChange="clrContentInabc ()">
<option value="products">Products</option>
<option value="categories">Specific Categories</option>
<option value="collections">Specific Collections</option>
</select>
<label>Select {{currentDetails.settings.product_filters.group}}</label>
<div ng-show="currentDetails.settings.product_filters.group" id="abc">
<select ng-model="currentDetails.settings.product_filters[currentDetails.settings.product_filters.group]"
id="e2" multiple="multiple"
style="width: 100%;"
ng-options="option.alias as option.name for option in ComplimentData[currentDetails.settings.product_filters.group]">
</select>
</div>
</div>
<script type="text/javascript">
function clrContentInabc(){
WHAT TO DO HERE???
}
</script>
</div>
The div "abc" must be set to default value i.e. Blank. I have already used the empty() function but it results in not loading the options of select. I've also tried .val("") or innerHTML,html("") and they all result in not loading the div "abc".