Hi i am new to angular and html. I am stuck with a small bug where in i have drop down in the html view with option tag inside select tag and i have used ng-repeat to show a dynamic array in that drop down everything works well, i have a condition were there is a text input box above my drop down with a add button so once i click on add button what input i have given in the text box should reflect in the drop down box with a select mark to that particular added input in the drop down if i click on the drop down box.
Here i have used ng-modle to save that input and ng-if to check if there is any input in the ng-model, even this works fine. The problem is when i select a value which is already there in the drop down that particular value is duplicated and added to the drop down with a tick mark.
Here is my sample code:
<select ng-model="newItem.Manufacturer" style="font-size: 15px; padding: 0px 25px;" class="form-control">
<option value="">--Select Category--</option>
<option ng-if="newItem.Manufacturer">{{newItem.Manufacturer}}</option>
<option ng-repeat="abcc in addNewCategory" value={{abcc.Manufacturer}}>{{abcc.Manufacturer | camelCase }}</option>
</select>
addNewCatgory is the varible which hold the entire object.. from that i am taking only the Manufacturer and displaying it in the drop down. newItem.Manufacturer is were i am storing the newly entered value, newItem is already initialised in the controller.js file.
This is two line of code were i push the object to addNewCategory:
$scope.addNewCategory =[];
$scope.addNewCategory = $scope.items.unique('Manufacturer');
Related
What I want to achieve is to hide the value from results.
<input list="search-results" value="userText" id="geocoder" autocomplete="off">
<datalist id="search-results">
<option value="userText">Address 1</option>
<option value="userText">Address 2</option>
<option value="userText">Address 3</option>
</datalist>
https://jsfiddle.net/2w6hjgn8/2/
I need to show all option elements in datalist.
Basic datalist function is to filter results by user input. But I want to use it another way.
I am creating live search functionality. If user enter text the search function starts, makes request and get the results. Each result is a separate option in datalist which is added dynamically. Every result includes a field "display_name" which I would like to display. Unfortunately, "display_name" does not always contain the exact text entered by the user. Dataset filters the result and does not show all of them.
My idea is to enter the same value in the value field as user entered - so all results will be displayed.
Unfortunately, dataset displays option's value and innerHTML. Is there any way to hide value?
The label attribute of the option tag allows variation between the displayed text and the option's value on some browsers.
<option value="aaa" label="xxx">
I found that on Firefox the datalist filters by the option's displayed text, whereas on Chrome each option displays and filters by both the label and the value. You can give it a try on your target browsers here: https://jsfiddle.net/Lyjwn0xs/1/
Your goal of filtering by hidden data as opposed to the displayed data doesn't seem to fit the default browser functionality of the datalist element, but you can customize its behavior using JavaScript. MDN has a good example of this on the datalist page under Customizing Datalist Styles.
I've got a regular drop downlist for selecting the countries name as text and countries_id as value.
Example:
<option value="1">Afghanistan</option>
Now I need an hidden form field with the ISO2 code for the country.
Example:
<input type="hidden" name="iso2" id="inputIso2" class="form-control">
And when the country is changed by the drop downlist, the hidden field should also change.
I've added the ISO2 to the option like this:
<option value="1" data-iso2="AF">Afghanistan</option>
But how do I pass it to the hidden field?
Or is there a better way of doing this?
The ISO2 field is being used by another script in the form, so it should work pre post.
This isn't really a PHP problem so much as it is a javascript problem. You need to put an event listener on your select element and when it changes, grab data-iso2 and apply the value to the hidden field.
Using jQuery, you'd do this:
$("#country").change(function(){
var iso2 = $(this).find(':selected').data('iso2');
$("#inputIso2").val(iso2);
});
I have two combo boxes in a form. The 1st combo box: type of position hiring while the 2nd combo box: location. The values of two combo boxes are dynamically populated from mysql
I need to change the value of 2nd combo box. If the value of 1st combo box change to "Linux Admin", the value of 2nd combo box should display the designated locations depends on the value of 1st combo box.
I found with the same function, but the values are manually populated Javascript - combobox change value of other combobox
I've solved this before. I did this in an MVC C# application, but the idea would still work here.
When you are building your HTML, create the name-value pairs for the combo boxes with the Name (in one of your stated cases) as being 'Linux Admin'. In the value for that, put all the locations in as a tab-delimited string.
In the javascript, when the first combo box changes, have the script read the values from the first combobox selector and split those values and put them in the next combo box as the names.
Here is a general idea that I used for a set of select boxes to allow for the selection of a Make, and then the next select box be populated with the available models.
<select>
<option value="Escape,Expedition,Explorer,F150,F350SD,Focus,Fusion,Mustang,T250 Vans">Ford</option>
<option value="Acadia,Envoy XL,Sierra 1500,Sierra 2500 Clsc,Terrain,Yukon">GMC</option>
</select>
I've the following, very basic code:
<select id="dir">
<option value="N">N</option>
<option value="S">S</option>
<option value="E">E</option>
<option value="W">W</option>
</select>
My system displays HTML using IE. In the displayed page:
On loading the page, the initial value displayed in the field is N.
I click the field. The dropdown menu appears with the N option hovering over the field. The S, E & W options are below the field.
I click S. The dropdown menu disappears, and the value displayed in the field is now S.
I click the field again. The dropdown menu appears with the S option hovering over the field. The N option is above the field, while the E & W options remain below the field.
This is not how I expected dropdown menus to display. How do I change the code such that the entire dropdown menu is below the field whenever it's displayed, neither partially hovering over the field nor above it?
This is the normal behaviour of a dropdown select.
If you want it otherwise you'd have to either build it yourself in javascript/jquery or look for a jquery plugin.
You'd have to remove the select options above the selected one and add them afterwards again. You could use the onchange handler for that.
As said - this is the normal behaviour, even though it isn't expected by you.
I have a select box in my webpage to fill a formulary. I want to recover the info filled by the user other times in it exists.
All my fields are properly filled except select box.
This is my code in html related to selectbox:
<br>Gender: <select id="gender">
<option value="man">Man</option>
<option value="woman">Woman</option><br>
It is a simple webpage just with a formulary in it. There is not anything else. I am just trying it.
With this line:
$(document).on("pageinit", '#settings', function() {
document.forms[0].gender.value = userGender;
...
I am modifiying the value of that box for reading it in other parts of my webpage or send it to the database. And the value keept is the correct one, but, the displayed value is not propertly shown.
Do you know which property do I have to modify to change the displayed value?
According to your question the asnwer developerCK has provided is correct.
Anyway look this demo and give a feed back if any thing we missed.
$('#gender').val('woman');
If you are using jQuery, then you can change or select the value of select box through jQuery!
It is very easy. Use selector and val.
$('#gender').val(userGender);