We Keep Coding

Javascript concatenate select and input values in a text box

I'd like to concatenate several values from selects and input fields on a final input field that contain all the values.
What I have until now is this:
$('#chosen_a').change(function() {
$('#ddlNames').val($('#chosen_a option:selected').data('id'));
console.log($('#chosen_a option:selected').data('id'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- First select -</option>
<option value="AAA" data-id="AAA">AAA</option>
<option value="BBB" data-id="BBB">BBB</option>
<option value="CCC" data-id="CCC">CCC</option>
<option value="DDD" data-id="DDD">DDD</option>
<option value="EEE" data-id="EEE">EEE</option>
</select>
<input id="Something1" placeholder="Write something"></input><br/>
<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- Second select -</option>
<option value="FFF" data-id="FFF">FFF</option>
<option value="GGG" data-id="GGG">GGG</option>
<option value="HHH" data-id="HHH">HHH</option>
<option value="III" data-id="III">III</option>
<option value="JJJ" data-id="JJJ">JJJ</option>
</select>
<input id="Something2" placeholder="Write something else"></input><br/>
<br><br>
<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>
In effect, I can get the first select option to the input field, but I do not know how to add the rest.

If I understand you well ...
Add a class 'getValues' to all inputs & selects that you want to get the values and create an event on JQuery onChange so when something will change it will auto-join it in that #ddlNames input.
$('.getValues').change(function() {
var values = [];
$('.getValues').each(function() {
values.push($(this).val());
});
$('#ddlNames').val(values.join(', '));
})

Try this:
const onChange = () => {
const value = $('#chosen_a option:selected').val() + ' '
+ $('#Something1').val() + ' '
+ $('#chosen_b option:selected').val() + ' '
+ $('#Something2').val();
$('#ddlNames').val(value);
}
$('select').change(onChange);
$('input').keydown(onChange);

how to make sum value changed depend on select box?

i have a multiple HTML select element
<select ng-model="selectedCar" class="form-control form-control-sm" id="select2" multiple="multiple">
and I generate rows like this
<td ng-model = "test123"
ng-if="selectedCar.includes(arrayItem.month)"
ng-init=" benefits(arrayItem) "
ng-repeat="arrayItem in data.information" class="tg-0lax">
{{::arrayItem.benefits}}
</td>
please note I call a function through : ng-init=" benefits(arrayItem)
this is my function:
$scope.benefits = function(item){
if (item){
benefits = benefits+ parseFloat(item.benefits);
$scope.benefitsCal= parseFloat(benefits);
} else {
$scope.benefitsCal = 0;
}
}
the problem, when I unselect a month from the multi-select, the total is not updated and I noticed that the value is incremental? this is my row that set the result from the function
<td class="tg-0lax"> {{benefitsCal}}</td>
please save my day

As you want to change value based on the selection from the select box then you should add
ng-change attribute and implement the function for change event.
Example:
<select ng-model="selectedCar" class="form-control form-control-sm" id="select2" multiple="multiple" ng-change="myChangeFunc()">

Chosen select - filter <optgroup > using jquery

I am using chosen drop down in asp.net. Is there a way to filter optgroup ?
There is a radio button list control with values US and UK. I want to filter drop down based on user's radio button selection. If the 'US' is selected then drop down should only show US optgroup records.
Here is the jsfiddle;
http://jsfiddle.net/7ngftsq2/
This is what i have tried so far with no luck;
('#rbDistDiv input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var ddlDist = $('#VCSdistSelect_ddlDist'),
val = $(this).val(),
region = $('option:selected', this).text();
$('span > optgroup', ddlDist).unwrap();
if (val !== '%') {
$('optgroup:not([label="' + region + '"])', ddlDist).wrap('<span/>');
}
});

You should be able to do something similar to this:
$(".chosen").chosen({
width: '600px',
allow_single_deselect: true,
search_contains: true
});
let UK_optgroup = $("#optgroup-uk").clone();
let US_optgroup = $("#optgroup-us").clone();
let CA_optgroup = $("#optgroup-ca").clone();
function filterSelect(selectedRadio) {
switch(selectedRadio) {
case "US": return US_optgroup
case "UK": return UK_optgroup
case "CA": return CA_optgroup
}
}
$('[type="radio"]').on('change', function() {
// This is only here to clear the selected item that is shown on screen
// after a selection is made. You can remove this if you like.
$("#selected-item").html("");
// Everything from here down is needed.
$("#select")
.children()
.remove('optgroup');
$("#select")
.append(filterSelect(this.value))
.trigger("chosen:updated");
});
$("#select").on('change', function(event) {
$("#selected-item").html("Selected Item: <b>" + event.target.value + "</b>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<table id="rbDistDiv" border="0">
<tbody>
<tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_2" type="radio" name="rbDistDiv" value="CA"><label for="rbDistDiv_2">CA</label></td>
</tr>
</tbody>
</table>
<p id="selected-item"></p>
<select id="select" class="chosen">
<option value="" disabled selected>Select your option</option>
<optgroup id="optgroup-uk" label="UK">
<option value="Adrian">Adrian</option>
<option value="Alan">Alan</option>
<option value="Alan B">Alan B</option>
</optgroup>
<optgroup id="optgroup-us" label="US">
<option value="John">John</option>
<option value="Billy">Billy</option>
<option value="Chris">Chris</option>
</optgroup>
<optgroup id="optgroup-ca" label="CA">
<option value="Gabrielle">Gabrielle</option>
<option value="Maude">Maude</option>
<option value="Morgan">Morgan</option>
</optgroup>
</select>

Just hide/show them by the label when an change is made to the radio button.
$('[type="radio"]').on('change', function () {
$('select')
.val('') // reset value if selection already made
.find('optgroup') // find the groups
.hide() // hide them all
.filter('[label="' + this.value + '"]') // find the one that matches radio
.show() // show it
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rbDistDiv" border="0">
<tbody><tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr><tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
</tbody></table>
<br>
<select name="VCSdistSelect$ddlDist" id="VCSdistSelect_ddlDist" class="chosen-select" data-placeholder="Select a Distributor" >
<option selected="selected" value=""></option>
<optgroup label="US">
<option value="123" division="US">Aaron</option>
</optgroup>
<optgroup label="UK">
<option value="655" division="UK">John</option>
</optgroup>
</select>

Returning multiple json objects with one php function

I am trying to populate two dropdown menu whose value is dependent with other one. In total I have 3 dropdowns. one for selecting a class and other two for selecting the subjects and exams of selected class.
I can populate one drop down menu (say for eg: select subject). but how can i populate both of them. My code is as follows:
<table>
<tr>
<td> select class</td>
</tr>
<tr>
<td> select subject</td>
</tr>
<tr>
<td> select exam</td>
</tr>
<tr>
<td><select class="form-control m-bot15" name="class_id" value='' onchange="myFunction(this)" style="float:left;" id="carId">
<option value="">select a class</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></td>
</tr>
<tr>
<td><select class="form-control m-bot15" name="subject_id" value='' style="float:left;" id="emptyDropdown">
<option value="">select a subject</option>
</select></td>
<tr>
</tr>
<td><select class="form-control m-bot15" name="exam_id" value='' style="float:left;" id="emptyDropdown2">
<option value="">select a subject</option>
</select></td>
</tr>
</table>
This is my view function My script for populating subject name is :
<script>
function myFunction(obj)
{
$('#emptyDropdown').empty()
var dropDown = document.getElementById("carId");
var carId = dropDown.options[dropDown.selectedIndex].value;
$.ajax({
type: "POST",
dataType: 'json',
url: "<?php echo base_url();?>mark/newdrp",
data: { 'carId': carId },
success: function(data){
$.each(data, function () {
$('#emptyDropdown').append('<option value='+this.subject_id+'>' + this.name + '</option>');
});
}
});
}
</script>
My controller function newdrp is
public function newdrp(){
$classId = $this->input->post('carId');
$subjects = $this->subject_model->Subjectbyclassid($classId);
echo json_encode($exams);
}
This works fine. Iam getting the subjects list in my dropdown. But i want to pass one more json object like this
public function newdrp(){
$classId = $this->input->post('carId');
$subjects = $this->subject_model->Subjectbyclassid($classId);
$exams = $this->exam_model->Exambyclassid($classId);
echo json_encode(array($subjects,$exams));
}
This is my console preview
[[{"subject_id":"1","name":"Physics","class_id":"1","teacher_id":null},{"subject_id":"2","name":"Chemistry","class_id":"1","teacher_id":null},{"subject_id":"3","name":"Mathematics","class_id":"1","teacher_id":null}],[{"exam_id":"22","name":"BW9","date":"03\/10\/16","class_id":"1","comment":""},{"exam_id":"26","name":"BW10","date":"17\/10\/16","class_id":"1","comment":""},{"exam_id":"30","name":"BW11","date":"31\/10\/16","class_id":"1","comment":""},{"exam_id":"34","name":"BW12","date":"14\/11\/16","class_id":"1","comment":""},{"exam_id":"40","name":"BW13","date":"28\/11\/16","class_id":"1","comment":""},{"exam_id":"45","name":"BW14","date":"11\/12\/16","class_id":"1","comment":""},{"exam_id":"46","name":"Revision Exam 1","date":"02\/01\/17","class_id":"1","comment":""},{"exam_id":"49","name":"Revision Exam 2","date":"8\/01\/2017","class_id":"1","comment":""},{"exam_id":"51","name":"Revision Exam 3","date":"15\/01\/17","class_id":"1","comment":""},{"exam_id":"55","name":"Revision Exam 4","date":"22\/01\/17","class_id":"1","comment":""},{"exam_id":"57","name":"Revision exam 5","date":"26\/01\/2017","class_id":"1","comment":""},{"exam_id":"59","name":"Revision Exam 6","date":"29\/01\/17","class_id":"1","comment":""}]]
How can i loop through this an display the exam name in corresponding dropdown. Please help

You'll have to loop through the second array as well, data being the parent array
success: function(data){
var examArr = data[1];
$.each(examArr, function () {
$('#emptyDropdown2').append("<option value='" + $(this).exam_id + "'>" + $(this).name + "</option>");
});
}

get the value of the dropdown of the particular row in a table using jquery

here is my html code
<td style="display:none">
<div class="col-sm-6">
<select class="form-control" id="riexclusion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</td>
i want to get the selected value from the dropdown list of every row.
I tried this jquery to retrieve the value..
var selectedstatus = $('#riexclusion option:selected').text();
alert(selectedstatus);
var totalrow = $("#ritable > tbody > tr").length;
for (var i = 0; i <= totalrow; i++) {
exclusion = $('tbody#riDecisionvalues tr:eq(' + i + ')td:eq(8)').select();
}
help me with this...
add jsfiddle

First of all you need to remove duplicate ids instead you can use class as shown below -
<td style="display:none">
<div class="col-sm-6">
<select class="form-control" class="riexclusion">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</td>
Use below jQuery to get each selected value from dropdown
//iterate all select under each tr
$("#ritable tbody tr").find(".riexclusion").each(function(){
selectedVal = $(this).val();
alert(selectedVal);
});

Id of an element must be unique, so use as a riexclusion class(<select class="form-control riexclusion">), then you can use .map() to get an array of all the selected values
var exclusions = $('.riexclusion').map(function () {
return this.value
}).get();

Try this fiddle
$('#riexclusion').on('change', function() {
alert($(this).val());
})

Try this code:
$("#ritable tbody tr:nth-child(8)")..find('select').val();
or if you want to loop through
var selectedstatus = $('#riexclusion').val();
$('tbody#riDecisionvalues tr').each(function(){
$(this).find('td').eq(8).find('select').val(selectedstatus)
})