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
Related
I have a drop down select menu and i want to store the selected value in the controller.i.e If office1 is selected then Office! is selected in the scope and so.
I am unable to store the value in the controller as I am new to angularjs.Can somebody Help
Heres my dropdown code
<div class="col-xs-12">
<h5>Select the System:</h5>
<select id="repeatSystem" ng-model="selectedSystem" style="width: 100%">
<option ng-repeat="(key,value) in systems" value="{{key}}">{{key}}</option>
</select>
<select id="repeatOffice" ng-model="selectedState" style="width: 100%">
<option ng-repeat="system in systems[selectedSystem]" value="state">{{system}}</option>
</select>
</div>
here is the plunker link
http://plnkr.co/edit/nNsM4VMVeHXS2hDIsAAd?p=preview
Because you are binding select dropdown with ng-model then you can simply access these value in your controller.
This will give you first dropdown selected value
$scope.selectedSystem //same in view {{selectedSystem}}
This is for second
$scope.selectedState //same in view {{selectedState}}
DEMO select value and check.
Updates
I have updated this following line, where you had hardcoded value="state" to i changed it to value="{{state}}":
<option ng-repeat="state in result[selectedArea]" value="{{state}}">{{state}}</option>
See Updated DEMO
I'm a bit confused about how to answer the question. The value of the drop-downs in the controller will be bound to the variables:
$scope.selectedArea and $scope.selectedState depending on what values are selected in the view. The value attribute that you're setting is overriding it however.
I've updated your plunkr here:
http://plnkr.co/edit/F2KqqtWKvPndv7y6un1F?p=preview
I've also demonstrated setting initial values in your dropdowns that will remove that annoying "blank" option.
You can get the answer from this link http://forum.ionicframework.com/t/get-selected-value-from-a-select/20241
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
What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.
example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example
HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/
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.
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.)