We Keep Coding

Bind Select inside of table row from array not binding on activate

In Aurelia (latest beta version), has anyone tried binding a select element inside of a table where the rows are bound to an array? I don't think it works on the initial load (activate() event).
Here's the example code:
<tbody>
<tr repeat.for="item of variations">
<td>
<input type="text" class="form-control input-sm" value.bind="item.name" />
</td>
<td>
<select class="form-control input-sm" value.bind="item.controlId">
<option>Select...</option>
<option value="1">DropdownList</option>
<option value="2">RadioList</option>
<option value="3">Checkboxes</option>
</select>
</td>
</tr>
</tbody>
In the viewmodel, the list of variations is built something like this in the activate() event:
this.variations.forEach(v => {
let variation = new Variation();
variation.value = v.value;
variation.text = v.text;
variation.control = v.displayType;
self.variations.push(variation);
});
The rest of the properties, ie. text input, show up fine on load. And the same view has regular selects outside of this table and they all bind correctly on load (ie. show the proper select option based on the value that is set programatically).

Is item.controlId a number? If so, what's probably happening is the number value is being compared using === with the string values of the option elements. You'll need to make sure the option values are numbers:
Instead of <option value="1"> use <option model.bind="1">

how to set dropdown menu a value

I have a table and each row has a checkbox and drop down menu.
This is one row
<tr>
<td><input id="checked1" type="checkbox" class="cd" value="1"></td>
<td><b>select</b></td>
<td>
<select name="questionType" id="questionType" class="qType QSelect">
<option value="">--Select--</option>
<option value="1">text</option>
<option value="2">rate</option>
<option value="3">etc</option>
<option class="show-checkboxes" value="4">option</option>
</select>
</td>
<td><input type="hidden" id="optionInputa1"></td>
</tr>
I want to set the dropdown to show text as selected by using jquery.
here are the 2 ways I tried
//$("#checked1").closest("input:select").val('text');
$('#checked1').parent().sibling().sibling().children().closest("input:select").val('text');
but none works.
Can anyone tell me what is wrong here?
you can see the fiddle

What you're doing is super complicated and brittle!
closest only traverses upwards, and that selector will never match a select because a select is not an input.
Also you have to set a select's value based on the, er, value, not the display text.
And lastly your fiddle doesn't work because there's no table and the <tr>s never make it into the DOM.
You want to find the same select in that row, so just do that:
$('#checked1').closest('tr').find('select').val('1');
Updated fiddle: http://jsfiddle.net/E3q5x/3/

If you want it to be done on checkbox checked you may try this..
$("#checked1").click(function () {
$("#checked1:checked").parents('tr').find('select').val('1');
});
Fiddle

Try this :
EDIT : As per discussion on chat, dropdown value get selected on page load and value equal to the checkbox value. Hence jQuery and JSfiddle link updated.
$(document).ready(function(){
$('input[type=checkbox]').each(function(){
$(this).closest('tr').find('select').val( $(this).val());
});
});
Here is the JSFiddle

Reusing single HTML select / drop down list for multiple table rows?

I have an HTML table which is typically 10-30 rows long with a column for "item name". The drop down itself has around 75 products to choose from. To make the page size smaller, I wanted to reuse a single drop down list for every row.
That is, when I click a row, jQuery should
Read the item name in the TD
Load the drop down list into the TD
Select the active value as the previous text value
On row exit, reverse the process
The items in the drop down are populated from a database on page load. I'm thinking the best way is to keep the list hidden and only make it appear in that spot as needed. But I'm not sure how to accomplish step 2 and 3
Edit
Not sure what code you're looking for since that's what my question is. But if I had something like below, I need to put that hidden select list into the active row and make it select to the value already in the table cell.
<table>
<tr>
<td>Item Name</td>
<td>Item Value</td>
</tr>
<tr>
<td>Product A</td>
<td>166.22</td>
</tr>
<tr>
<td>Product B</td>
<td>166.22</td>
</tr>
</table>
<select id="itemname" style="display:none;">
<option value="2231A22">Product A</option>
<option value="2231A21">Product B</option>
<option value="2231A20">Product B</option>
</select>
Edit 2- Probable Solution
Based off one of the responses below, I poked around a bit and was able to create this script which works. Not sure if I can make it more efficient, but it does what I was looking for. The function takes "e" as a TD
function addItem(e) {
if ($(e).find('select').length) {
var input = $(e).find('select').eq(0);
$(e).text($(input).val());
$(input).appendTo($('.promotion-header'));
}
else {
var text = $(e).text();
$(e).text('');
$('#itemname').appendTo(e).val(text).show();
};
}

Try copying all elements of the main div to all other div using by setting and getting html from .html() method. Here in the demo, all elements in myDropDownListDiv is copied to anotherDiv.
HTML :
<div id="myDropDownListDiv"><select id="itemname">
<option value="2231A22">Product A</option>
<option value="2231A21">Product B</option>
<option value="2231A20">Product B</option>
</select>
</div>
<div id="anotherDiv">
</div>
jQuery :
$(document).ready(function(){
//copies all contents of myDropDownListDiv into anotherDiv
$("#anotherDiv").html($("#myDropDownListDiv").html());
});
Demo

Move selected items to the top of sorted multiple select (Javascript)

I'm using jQueryUI multi-select Widget that draws a nice dropdown menu widget for multi-selects.
I have an already sorted (on username) multiselect like that:
<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="44">bbb</option>
<option value="21" selected="selected">ccc</option>
<option value="50">ddd</option>
<option value="16">eee</option>
<option value="25" selected="selected">fff</option>
</select>
And I want to keep the username sorting, but moving the selected items to the top of the list, everytime the user opens the drop down menu. So in this example the new order must be:
<select multiple="multiple" name="users" id="id_users">
<option value="1" selected="selected">aaa</option>
<option value="21" selected="selected">ccc</option>
<option value="25" selected="selected">fff</option>
<option value="44">bbb</option>
<option value="50">ddd</option>
<option value="16">eee</option>
</select>
From the website of the widget, I see that it has a method that returns an array of selected items, and it has an event beforeopen. So I think I can manage the sorting (using that array) by handling the event beforeopen, but I'm rather new to javascript, anyone can point me in the right direction please?
I searched here, and all the solution I found solve the problem "sort on text" (which is not what I need).
EDIT: I solved in this way:
$('#id_users').multiselect({
beforeopen: function(event, ui) {
$('#id_users option:selected').prependTo('#id_users');
$('#id_users').multiselect('refresh');
}
});
So in initialization of the widget, I bind those two lines of code to the beforeopen event.
In the handling of beforeopen I prepend the selected items to the others, and refresh the widget (because it reads the multi-select only once, and if you don't refresh the order remains the same, even if the HTML changes).
I can't upvote the answer because I don't have enough reputation. But thanks!

Try this.
$('#id_users option:selected').prependTo('#id_users')
→

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.