We Keep Coding

Drop down value replicates in nog options Angular

I have a dynamically generated html table that adds rows based on the record that is displayed. I'm adding a column that will contain a dropdown. I used ng-options for it, however every time I change one record, the rest are also updated. Tried changing it to ng-repeat and get the same result. See code below:
<td>
<select class="form-control" ng-model="$ctrl.selectedRC" ng- options="r.ccd as (r.OName + ' -- '+ r.RCName) for r in $ctrl.RC track by r.ccd"> </select>
<!--if I have 5 records, all dropdowns in the table change -->
</td>
Using ng-repeat:
<select class="form-control" ng-model="$ctrl.selectedRC" <option value="" ng-selected="true">--Select one--</option>
<option ng-repeat="r in $ctrl.RC"
value="{{r.OName}}"
ng-selected="{{r.OName === selectedRC}}">{{r.RCName}}
</option>
</select>
I know that these two are currently displaying two different things (one a concatenated set of values, the other juts one). But my main interest is to figure out how to have each <td> have its own dropdown without affecting the rest of the rows.

Simply because you use the same ng-model for all rows.
You need to define a different one for each row.
You do this:
ng-model="$ctrl.selectedRC"
but you need something like this:
ng-model="$ctrl.selectedRC[$index]"
where $index is your reference to the row.

Changing two select options value via javascript

there are two option controls in a website:
<select class="operator" name="operator" id="operator">
<option value="0">Entekhab Operator</option>
<option value="1">Irancell</option>
<option value="2">Talia</option>
<option value="3">HamraheAval</option>
</select>
<select class="card" name="chargeCard" id="chargeCard">
<option value="0">Entekhab Sharj</option>
</select>
When a user changes the first one by clicking on that (and selecting an option), the second one will also change...as you see in the above code, the second option has no value and will get some values after clicking on the first one
My problem is that I have to change them via javascipt in my android program
I tried with the following:
document.getElementById("operator").value=2
and this way i changed the first one.
But the second one does not change and dose not get values! What should I do for the second option to change as well?

maybe i didnt explain my question very well. i changed the value of the option but i needed something like stimulating the change event.
this code solved my problem:
$('#operator').trigger('change');

Show selected option based on variable

I'm a pretty novice programmer who is trying to implement something I thought would be pretty simple, but after searching haven't found a solution.
So right now I have an variable called msg. msg is dynamically generated and can be anywhere from 2-999.
I have a select that is very simple:
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_IDNUMBER'>
<option value='1'>Exam Room</option>
<option value='2'>Exam Room 2</option>
<option value='3'>X-Ray Room</option>
<option value='1000'>Check Out</option>
</select>
</form>
My problem is: lets say msg has a value of 3. How can I show the select with a value of 3, so the selected option(the option first visible before clicking the arrow) is X-Ray Room?
my code (taken out of a larger block of code is:
$e.find('.locationSelect').show();
How can I modify it to say something like:
$e.find('.locationSelect':value=msg).show(); //this would show the .locationSelect with the selected value being the one with the id of 3, or whatever msg is
Thanks for any and all help! If you need any more details, just ask!

Try
$e.find('.locationSelect').val(msg);
http://jsfiddle.net/mowglisanu/ktcgy/

You can use $.fn.val(value) to set the selected value of a dropdown.
Note that in case you pass to $.fn.val a value that is not present in the dropdown, the first option will be selected instead.

Select only drop-down menu that has changed

I have a table that includes a column for the user to select from a drop-down menu to populate the next column. Problem is the table contains the same drop-down menu for each row and on change when I select using the following syntax JQuery selects all drop-downs instead of just the one in that has actually changed. Below solution uses event.stopImmediatePropagation() to act similar to a break point and is the only solution I can think of that will work. Please let me know if there is a more elegant solution out there...
<table>
<tr>
<td>
<select name="selected_client[id]" id="selected_client_id" class="selected_client">
<option value=""></option>
<option value="240">CLIENT ONE</option>
<option value="195">CLIENT TWO</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="selected_client[id]" id="selected_client_id" class="selected_client">
<option value=""></option>
<option value="240">CLIENT ONE</option>
<option value="195">CLIENT TWO</option>
</select>
</td>
</tr>
</table>
$j('.selected_client').change(function(event) {
var client_id = $j(this).val(); // <-- value of the drop down that was currently changed
var tmp_row = $j(this).parent('td').parent('tr');
// perform action
event.stopImmediatePropagation(); // prevents calling other matched rows
return false;
});

First off, id's need to be unique. A class would be better suited for this purpose.
$('.selected_client').change(function(){
$(this).val(); // <-- value of the drop down that was currently changed
});

May be you could differentiate the element IDs for each row, example: the first select element would have an id of "selected_client_id01", the second one "selected_client_id02" and so forth. And then only assign functions to all elements with that one class "selected_client".

using event.stopImmediatePropagation(); proved successfully and simply acts as a break which is useful for the scenario when you are dealing with dynamic entities where selecting by id does not quite solve the problem.

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.)