We Keep Coding

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

How to fix this JQuery script that show a table row only if a specific value of a select input tag is selected?

I am absolutly new in JQuery development and I have to do the following thing.
Into a form I have something like this:
<tr>
..........................
..........................
<td>
<s:select list="kmProjectInfoStatusList" id="selectStatus" headerKey="0"
listValue="status"
listKey="idProjectInfoStatus"
headerValue="-- Please Select --"
name="kmProjectInfo.status.idProjectInfoStatus"
/>
</td>
</tr>
..........................
..........................
<tr id="datePickerRow" style="display:none">
<td>
<sj:datepicker name="kmProjectInfo.startingDate" id="since" maxlength="10"
displayFormat="dd/mm/yy" showOn="button" duration="slow"
showAnim="slideDown" readonly="true" changeMonth="true"
changeYear="true"
/>
</td>
</tr>
As you can see the form contains a table that contains itself a row having id="datePickerRow" and that for default it is not shown (infact it have the display:none CSS settings).
Upper this hidden row there is a td element that contains:
<s:select list="kmProjectInfoStatusList" id="selectStatus" headerKey="0"
listValue="status"
listKey="idProjectInfoStatus"
headerValue="-- Please Select --"
name="kmProjectInfo.status.idProjectInfoStatus"
/>
This is only a Struts 2 tag that wrap this standard HTML input tag of type select, infact in the generated html code I have:
<select id="selectStatus" name="kmProjectInfo.status.idProjectInfoStatus">
<option value="0">-- Please Select --</option>
<option value="1">Closed</option>
<option value="2">Active</option>
<option value="3">Testing</option>
<option value="4">Starting</option>
</select>
So what I need to do is create a JQuery script that if the selected value is:
<option value="4">Starting</option>
then show the hidden row having id="datePickerRow".
I am thinking that maybe I can do something like this:
$(document).ready(function () {
$("#selectStatus").bind("SELECT AN OPTION VALUE", function (event, data) {
if (data.rslt.obj.attr("value") == 4) {
$('#datePickerRow').show();
}
else {
$('#datePickerRow').hide();
}
})
});
Can be a good idea or is it wrong and I can do this thing in some other way?
If my idea is ok I can't achieve it because I know that the .bind() method is used for attaching an event handler directly to elements (and in my case the event handler is the function that show or hide the row having id=datePickerRow) but I can't understand what is the propper event to put inside bind("SELECT AN OPTION VALUE"
What is the right binded event for the selection of a value into a select input tag ?
My second doubt is related about how to correctly extract the selected value of this select input tag.
I have wrote:
data.rslt.obj.attr("value")
but maybe it is wrong because I think that this is not an attribute.
How ca I fix my script to correctly work?
Tnx

How to populate a textbox with value of country dropdown each time user makes a selection?

I have an issue related to an HTML page. Hoping that someone could help resolve it -
I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box.
This will happen each time the User changes the country.
All of the data is present in the page itself, and no server calls are made to fetch the data.
Could this be done using the delegate method? Can I also use Ajax in this case?
Any help would be very much appreciated.
Many thanks in advance!!

By using Jquery
Try this
HTML
<select id="c_code">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<input id="code" type="text">
Script
$('#c_code').on('change',function(){
$('#code').val($(this).val());
});
DEMO

You simply need to bind the logic to the change event of select
Here is the html code
<select id="ddl">
<option value="001">India</option>
<option value="002">USA</option>
</select>
<input type="text" id="txt" />
Here is the jQuery
$('#ddl').change(function(){
$('#txt').val($('#ddl').val());
});
Here is the demo

load option id from database on image click

im trying to think of the best way to do this and im coming up short... I have a dropdown menu which pulls names from a database. Something like this -
<form class="option1">
<select name="users" onChange="showUser(this.value)">
<option value="0">NAMES:</option>
<option value="1">John</option>
<option value="2">Mark</option>
<option value="3">Luke</option>
<option value="4">Chris</option>
</select>
</form>
Then I have a javascript function that gets a php file which connects to a database and displays the records. The dropdown is fine, but id like to be able to have this happen when someone clicks an image. Can I just assign an option value to the image, then do something like -
$(document).ready(function () {
$('img').click(function(){
$('select').val($(this).attr('option'));
});
});
to make it fire when a certain tile is clicked? Any ideas? thanks all.

I could think of two possibilities:
1) use the alt-attribute to store the id in the image tag:
<img src="img.png" alt="1">
then you could use
$('select').val($(this).attr('alt'));
2) use the id of the image to store the id of the users in the DB:
<img id="img_1" src="img.png">
then you could use
$('select').val(this.id.substr(-1));

Update content Dropdown list via Jquery

I'm struggling with the following and I'm not even sure if it's possible at all.
I have, at start, two pull down menus. Menu one with suppliers and (currently) a second pull down with all size of photos that are in the database. Where I want to go to is that when selecting a supplier, the second pull down menu changes with the option this supplier provides. So far nothing difficult using Jquery and use the output to update the second pull down menu.
Now comes the difficult part. I use the second drop down to insert their information. So the second pull down menu, could be be dozen of them, are all the same. I use a JS script to copy the table row of the form. Since an ID should be unique, these pull downs don't have an ID.
Is it still possible to update all of these 'second' pull down menu's on change of the first pull down menu? And if so, how is it possible?
The first pulldown that should trigger the update of the dropdowns below:
<select name="leverancier" id="leveranciers">
<option value="1">Supplier 1</option>
<option value="2">Supplier 2</option>
</select>
This part gets duplicated:
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
Thanks
Ralf

Give each secondary SELECT the same class.
Then, define an event handler on the primary SELECT that updates secondary SELECTs by targeting that class.
E.g.:
jQuery('#leveranciers').bind('change', function(event) {
// somehow determine the new set of options for all secondary SELECTs
jQuery('SELECT.secondary').each(function(i, e) {
jQuery(e).html(newOptionsMarkup);
});
return true;
});
(Please ignore the terrible .html()-based approach. The important piece is the way updates are targeted.)