I am trying to set the selected tab so when a user tries to edit his or her profile the data is preset to the current data. It creates a list just doesnt create the selected. Can someone tell me where I am wrong?
<b>Education:</b> <select class="form-control"
ng-model="currentUser.education">
<option ng-repeat="education in educations" value = "{{education.educationId}}"
ng-selected ="{{education.educationName == currentUser.educationName}}">{{education.educationName}}</option>
</select>
Related
I have a <select> element which is filled by angular, and the options are properly displayed with the data in ctrl.servicios :
<select id="id_select_token" ng-model="ctrl.token" class="form-control input-sm"
ng-selected="ctrl.token == item.Clv_Servicio"
ng-change="ctrl.GetPrecioToken();"
ng-options="item as item.Descripcion for item in ctrl.servicios track by item.Clv_Servicio">
<option value="">Selecciona</option>
</select>
The issue is, I want this select to, by default, have the <option value="">Selecciona</option> selected. I've tried to add selected="selected" to that option, but it doesn't work. I also tried, on javascript, this:
let select_token_input = document.getElementById('id_select_token');
select_token_input.selectedIndex = 0;
But this also doesn't work, is angular overriding it?, how could I best achieve this?
Currently I have a dropdown in my edit.blade.php
<div class="md-form">
<select id="estado_civil" name="estado_civil" class="mdb-select validate" onchange="editar('estado_civil',$(this).val());">
<option value=""></option>
<option value="1">Soltero(a)</option>
<option value="2">Unido(a)</option>
<option value="3">Casado(a)</option>
</select>
</div>
I needed the dropdown to select/display the value the user had previously chosen and stored in the database. I achieved this using JQuery:
$(document).ready(function() {
var e = $.Event('change');
$('#estado_civil').val('{{$personas->estado_civil}}').focus().trigger(e);
However, this function registers the display of the pre-selected value as a 'change' upon page load. Therefore, it triggers another function I made that notifies the user the value has changed.
Question: Is there a way to select/display the preselected value from the database, without registering it as a change?
Thank you so much!
I'm not super familiar with Laravel but from a quick read of the docs you'd do something like this in the blade:
<option value="1" {{estado_civil) == 1 ? "selected" : ""}}>Soltero(a)</option>
<option value="2" {{estado_civil) == 2 ? "selected" : ""}}>Unido(a)</option>
This uses a ternary to set the selected value of the input.
I want to display the country in response from dropdown. I tried a lot and I could not find any solution.
I am using a JavaScript link "http://iamrohit.in/lab/js/location.js".
I am getting the selected country name from JSON response but can't compare it with the dropdown list and display the response value.
My HTML :
<select name="country" class="form-control1 drop countries" required ng-model="model.country" placeholder="select" id="countryId sel1"><option value="" disabled selected>Select</option>
My controller :
$scope.model.country = "India"; //from json response
I saw this "<option value="? string:India ?"></option>" when I inspect the country field in the profile page.
If you want to view what option is selected, the you will indeed put your ng-model in your tag.
But if I understand correctly, you want to create different options according to your JSON data.
I suggest using:
<select>
<div ng-repeat= "x in model.country">
<option> {{x.Name}} </option> //I suggest dividing your JSON information
</div>
</select>
I hope this answers your questions. Let me know if you need more precise information!
I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.
I'm new to JS, I'm trying to access a selected value from a select list using the selectpicker plugin from bootstrap.
Currently my code gives me the entire list rather than just the currently selected item.
<div class="form-group">
<select class="selectpicker" name="applicationSelect">
<option value="1">app 1</option>
<option value="2">app 2</option>
<option value="3">app 3</option>
</select>
</div>
Then in my script.js file I have:
var appName = $('select[name=applicationSelect]').val(1).text();
The retrieved value will then be based onto an Ajax event, but I'm struggling to find a working example doing what I'm trying to do.
How do I retrieve only the currently selected item?
This should do the trick:
$('select[name=applicationSelect]').val()
If you specify val() with a parameter, you are actually setting the value. Without parameters, the method will just return the current value.
You can find more information here.