I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();
Related
I'm building a laravel project (version 9) and I need to use selectize.js for my select inputs.
I need to show a placeholder like "Select product" so users can click on it, search for items and choose one. And I need this field to be required.
Here's a sample select input :
<select name="product_id" id="select_product" class="form-control my-3">
<option value="">Select product</option>
#foreach($products as $product)
<option value="{{$product->id}}" data-price="{{$product->price}}" data-stock="{{$product->stock}}">{{$product->name}}</option>
#endforeach
</select>
This one works fine, it's not required though. And submiting the form with this field empty throws an error, I need it to be required on the front-end level.
BUT, when I add required to the select input, it doesn't show ANY of the options I'm loading inside select box with foreach loop. Doesn't even show a dropdown when I click on it.
Is there a way to have a placeholder and make the field required at the same time in select.js? If not, do you know any alternative to select.js that works with Laravel?
I also tried giving a placeholder through selectize function with JS, nothing changed, it shows placeholder but no items being shown (when the input has required tag).
<select name="customer_id" class="form-control" id="select_customer" required>
<option value=""></option>
#forelse($customers as $customer)
<option value="{{$customer->id}}">{{$customer->name}}</option>
#empty
<option value="" selected disabled>No customer found</option>
#endforelse
</select>
$('select').selectize({
placeholder: 'Select something',
});
Simplest way to put it : Select input doesn't show any options when I add required tag to it. (I'm loading options with laravel blade foreach loop.)
I'm setting up a page for a character generator, and I'm giving users the option to either randomize traits or enter their own. I have the "choice vs random" options set up as toggle switches for each trait category, and then if they want to choose their own, I have drop-down select menus for each category with all the traits listed.
Here's my HTML for the switches:
<div class="switch">
<p>Class</p>
<label>
My Choice
<input type="checkbox" id="class-choice">
<span class="lever red darken-4"></span>
Random
</label>
</div>
Here's my HTML for the corresponding select menu:
<div class="input-field col s6">
<select id="classMenu" name="class">
<option value="barbarian">Barbarian</option>
<option value="bard">Bard</option>
<option value="cleric">Cleric</option>
<option value="druid">Druid</option>
<option value="fighter">Fighter</option>
<option value="monk">Monk</option>
<option value="paladin">Paladin</option>
<option value="ranger">Ranger</option>
<option value="rogue">Rogue</option>
<option value="sorcerer">Sorcerer</option>
<option value="warlock">Warlock</option>
<option value="wizard">Wizard</option>
</select>
<label for="class">Class</label>
</div>
What I want to have happen is that every time they click the toggle switch to "random," the corresponding drop-down menu will display a randomized option from the list. I have all the option names saved as an array in my JavaScript:
var charClasses = ["barbarian", "bard", "cleric", "druid", "fighter", "monk", "paladin", "ranger", "rogue", "sorcerer", "warlock", "wizard"];
I know I need to use some sort of event listener and a math randomizing function and then something to display that option value, but I guess I'm confused about how to actually do that. And then I think I'll have to use a $('#save-btn').on("click", ... to save it to localStorage as well. I just started learning JS and it's not really intuitive for me yet, so any guidance would be appreciated.
To get a random item of array use:
var item = charClasses[Math.floor(Math.random()*charClasses.length)];
To select the item use:
$('#classMenu').val("item ");
You can use a button event like this:
$('#btnRandom').click(function() {
var item = charClasses[Math.floor(Math.random()*charClasses.length)];
$('#classMenu').val(item);
});
The code select a random value from array and put in variable item. Next select the item in select field.
I have a <select> that loops over an array of data and displays the selections available in the dropdown list.
the markup is like this:
<select required class="form-control btn-primary btn dropdown-toggle"
ng-options="s.name for s in list track by s.name" ng-model="list">
<option selected value=""></option>
<option value="" ng-click="">Split</option>
</select>
What I want is, to have the preselected value as an empty string, I achieved that with:
<option selected value=""></option>
but then I need a second custom <option> tag besides all the <option> tags that get generated by the ng-option,
in this tag I need to show a string, in this case "split", and there will be a ng-click on this option so the user can click on it and a second dropdown will appear.
The problem is the second <option> tag it's not shown, only the first one, and I did some tests, and apparently I can show only one option tag besides the ones from ng-option.
Is there a solution for this?
What I need as end result is my option list generated by ng-option,
then a preselected option that is EMPTY (it shows when the user loads the page), and a second option with a custom string that will be used like a button.
Here a jsfiddle where you can see that the second custom option tag isnt shown
https://jsfiddle.net/0xyt24sh/10/
thank you
It's impossible to have more than one hard-coded option with ngOptions, as explicitly mentioned in the documentation:
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option.
A workaround might be to use ngRepeat:
<select class="form-control btn-primary btn dropdown-toggle" ng-model="selection">
<option value="" selected></option>
<option ng-repeat="s in list">{{s.name}}</option>
<option ng-click="" value="split">Split</option>
</select>
Updated fiddle: https://jsfiddle.net/0xyt24sh/17/
From ngOptions documentation:
Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option. See example below for demonstration.
In this case, ngOptions isn't fit for your problem; Instead, you can use <option>s with ng-repeat, as such:
<select required class="form-control btn-primary btn dropdown-toggle" ng-model="selected">
<option selected value=""></option>
<option ng-repeat="item in list track by item.code">
{{item.name}}
</option>
<option value="split" ng-click="doSomething()">Split</option>
</select>
Working JSFiddle here
I have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("change");
thank you for your suggestions!
This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">
Try this.
function country() {
$("#seachcountry").val($(this).val());
}
For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()
Hu,
another question to angular.
I have an array:
items = [
{"id":1,"name":"AAA"},
{"id":2,"name":"BBB"},
{"id":3,"name":"CCC"},
{"id":4,"name":"DDD"}
]
and my ng-select that is combined with a label by
`{{ itemid }}
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>
Now, when I select by the first time the first option is an "empty space" that I can not choose. But choosing an option makes the drop down closes. And when I click on my select again the last selected option is hightlighted.And I'd like to have the "empty space" as first option again.
Is it possible?
Ye that's possible by resetting your itemId with a combination of ng-click and ng-change e.g.:
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items"
ng-click="reset()" ng-change="update()">
</select>
Use one to track when a change is made and only if a change is made and the element is clicked again reset itemId to 0
See this plnkr for an example: http://embed.plnkr.co/i0J0lCZwgnQ9YRoeKoHS/
You can specify a blank option in your HTML as an 'option' element nested within the select (from angular docs):
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>