We Keep Coding

Display a default disabled, selected option as a placeholder in a vue select input

I am attempting to create a form with a select with a bunch of options that are pulled from a database, and also one option that will be a placeholder that will say something like "Choose a title".
The issue I am experiencing is that although the placeholder option is indeed selected and is disabled correctly, it does not display in the actual input list before anyone clicks on it as the selected option.
Required behavior:
Before a user has clicked on the dropdown at all, they should see a dropdown that has the grayed out text of a disabled item that says "Choose a title". When they click on the dropdown, they can then choose from the list of titles that are grabbed from the database.
Current incorrect behavior:
Before a user has clicked on the dropdown at all, they see an empty dropdown menu with nothing written or selected in it. Once they click on the dropdown, it shows that the disabled option is currently selected even though the text doesn't show in the input box (but does in the dropdown), and are able to select one of the non-disabled options that is pulled from the database.
What am I doing wrong here? I've found several things online that tell me to do it the way I have it right now. Here is my code:
<label for="TitleSelector">
What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
<option value="" disabled selected>Choose A Title</option>
<option
v-for="(title, index) in allTitles"
:value="title"
:key="index"
>
{{ title }}
</option>
</select>

I've got it, it works if I v-bind the value of the disabled option like so:
<option :value="null" selected disabled>Choose A Title</option>

Dropdown with selected value, using angularJS

I am having a form on a modal filled out, then creating a form on the same html page and filling the form with the information from the modal form.
All of the inputs fill fine, and on another page, the dropdown fills fine using just ng-model.
However, when this form shows up, the dropdown is on the selected value but it isnt able to be changed or clicked. Its just a static value. I want it to be able to be changed to the other values in the list. The dropdown has an arrow showings its a dropdown but when clicked it doesnt dropdown.
self.alert.measureType is bound with ng-model to a dropdown in the form on the modal that gets filled out.There is only 2 values in self.measurements, Meters and Kilometers.
Here is the dropdown
<select class="form-control" style="background-color: lightgoldenrodyellow; border-color: black;" ng-model="self.alert.measureType">
<option value="" style="color: #ccc !important" disabled> -Select- </option>
<option ng-repeat="type in self.measurements" value="{{type}}"> {{type}} </option>
</select>

Add your controller following this.
Assign the value your model in selected value
$scope.self.alert.measureType = "Meters"

How to pragramatically change a dropdownlist to another field's value

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("chang‌e");
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()

Add item to a dropdown and a text field in angular.js

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();

set default selected value in <option> in angularjs

I want to display by default a value from a json which is something like
[{"city":"SURAT"},{"city":"BARODA"},{"city":"AHMEDABAD"},{"city":"MUMBAI"}]
this is came from server. I am store this value in $scope.user_all_city and there is one city is provided to user which is i am stored in this
$scope.user_city = "surat";
now my select tag is something like this
<select ng-model="model.user_all_city" ng-options="rm.city for rm in user_all_city" ng-init="model.user_all_city=user_city">
it is display first value as a blank. it is return to me default city when i am print {{mode.user_all_city}} but it is didn't display as selected option in it.
please help me over here and how to call a function in when i am change the value.

Try using ng-repeat instead of ng-options basically the ng-options is not that much descriptive in angularjs.
<select ng-model="cityName" required>
<option>Select city</option>
<option ng-selected="cityName==city" value="{{city}}" ng-repeat="city in cityList"></option>
</select>
here the required attribute will enusre that select city is highlighted in case of null value. and ng-selected will check if that expression is true and the only that object is selected.The value inseide the model=cityName play the role of selected value here.