We Keep Coding

set selected value for dropdown in table using Jquery

I'm adding a table row using jquery wit dropdownlist in it as follows -
$.each(data, function (i, item) {
$('#tableRM > tbody:last-child').append('<tr sn=' + item.SN + '>
<td>
<select name="RMLotName" class="form-control lotColumns">
<option value="">Select</option>
<option value="Lot1">Lot1</option>
<option value="Lot2">Lot2</option>
<option value="Lot3">Lot3</option>
</select>
</td>
<td><input name="RMLotQty" type="text" disabled class="form-control lotColumns" value="' + item.LotQty + '" /></td>
</tr>)
}
Now I want to select the default value for dropdownlist with Name = #RMLotName
I tried :-
$('#RMLotName').val("'" + item.LotName+"'");
and
$("#RMLotName option[value='" + item.LotName+"']").attr('selected', 'selected');
but it's not working. I've searched for a while and found some links like This This and others but none of them are working.

Consider creating a jQuery object out of the row html before appending that object.
It allows you to use jQuery methods on that specific row. Then you need a better selector for the <select>
$.each(data, function (i, item) {
let rowHtml = `<tr sn="${item.SN}"><td>
<select name="RMLotName" class="form-control lotColumns">
<option value="">Select</option>
<option value="Lot1">Lot1</option>
<option value="Lot2">Lot2</option>
<option value="Lot3">Lot3</option>
</select>
</td>
<td><input name="RMLotQty" type="text" disabled class="form-control lotColumns" value="${item.LotQty}" /></td>
</tr>`;
// create object from html string
let $row = $(rowHtml)
// set value of the select within this row instance
$row.find('select.lotColumns').val(item.LotName);
// append updated object to DOM
$('#tableRM > tbody:last-child').append($row);
});

Html select onchange get custom attribute value set to other input value

onchange I want to get the select option custom attribute and set to the other input's value. Somehow I cannot get the course_price in the input onchange of the select. It only shows the first option value in the input only.
function selectFunction(e) {
var value1 = $("#test").data('typeid'); //to get value
document.getElementById("money").value = value1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" onchange="selectFunction(event)">
<option id="test" data-typeid="<?php echo $row1['course_price']?>"
value="<?php echo $row1['course_id']?>"><?php echo $row1['course_name']?>
</option>
</select>
<input type="number" value="" id="money" class="form-control">

The issue is because the data-typeid attribute is on the selected option, not the select, so your jQuery code is looking at the wrong element. You can fix this by using find() and :selected to get the chosen option before reading the data attribute from it.
Also note that on* attributes are very outdated. You should be using unobtrusive event handlers, something like this:
$(function() {
$('select.form-control').change(function() {
var typeId = $(this).find('option:selected').data('typeid');
$("#money").val(typeId);
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>
<input type="number" value="" id="money" class="form-control">

In your question you are using #test which is id for all options and so it will always consider first occurance of id test. So do not use same id multiple times on the same DOM, change it to class="test" if you need it, otherwise, you need to target the selected option, and it will not need any id or class. Check here:
var type_id = $('select option:selected').attr('data-typeid');
and assign the variable to input box:
document.getElementById("money").value =type_id;
So the entire updated function will be like this:
function selectFunction(e) {
var type_id = $('select option:selected').attr('data-typeid'); //to get value
document.getElementById("money").value =type_id;
}

Another way to make it:
$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected disabled>-- Select one --</option>
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>
<input type="number" value="" id="money" class="form-control">

How to change placeholder and name from select option dynamically using jQuery

if i need to edit my question please state so before down voting.
I'm creating a form that when an option selected. a form will appear depends on the option selected. How do i dynamically change placeholder and name. Also if the option is selected multiple times the placeholder and name will increment like
placeholder="holder1" name="name1"
placeholder="holder2" name="name2"
here's my code:
Twig file
<select class="form-control" id="collaterals" name="loan_type_id" required>
<option disabled value="0" selected}>-- Select Collateral --</option>
<option value="" id="veh_coll">Vehicle</option>
<option value="" id="hal_coll">House and Lot</option>
<option value="" id="lot_coll">Lot</option>
</select>
Jquery
jQuery(document).on('click',"#removeThis",function(e){
jQuery(this).closest('tr').remove();
e.preventDefault();
});
jQuery("#addType").click(function() {
var selectedType = jQuery('#collaterals :selected').text();
jQuery("#nfo").clone().appendTo('tbody');
jQuery("#addTypeText").val(selectedType);
jQuery("#nfo").removeClass("hidden-xs-up");
});
I need the placeholder and the name to be dynamic depends on the option i selected and also making the name increment for example name="vehicle1" if add another option it will be name="vehicle2"

I am self-taught so someone please show me a better way if possible.
Create a counter with global scope:
i = 0
(inside a function)
Window[i] = 0
Increment when they choose an option:
Window[i] ++
When you want to set the name and placeholder:
$(input).attr("placeholder", newValue + window[i])
$(input).attr("name", newValue + window[i])

display and value depending options of drop down menus with different values

I want to submit my selected value in the dropdown menu to my database, but the value that is added to the database is not the same as what I chose.
This is the record that was inserted, and the "kuarter" field value is "kuching-01":
But these are the selections I chose, where the field "kuarter" is "JALAN DURIAN BURONG STAMPIN":
How do I add the value "JALAN DURIAN BURONG STAMPIN" to the database instead of "kuching-01"?
This is my javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $options = $("#kuarter").clone(); // this will save all initial options in the second dropdown
$("#kawasan").change(function() {
var filters = [];
if ($(this).val() == "") {
$(this).find("option").each(function(index, option) {
if ($(option).val() != "")
filters.push($(option).val());
});
} else {
filters.push($(this).val())
}
$("#kuarter").html("");
$.each(filters, function(index, value) {
$options.find("option").each(function(optionIndex, option) { // a second loop that check if the option value starts with the filter value
if ($(option).val().startsWith(value))
$(option).clone().appendTo($("#kuarter"));
});
});
});
});
</script>
This is the HTML code for the dropdowns:
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kawasan:</td>
<td><select name="pilih_kawasan" id="kawasan">
<option value="none">SILA PILIH</option>
<option value="kuching">KUCHING</option>
<option value="lundu">LUNDU</option>
<option value="sriaman">SRI AMAN</option>
<option value="betong">BETONG</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kuarter:</td>
<td><select name="pilih_kuarter" id="kuarter">
<option value="none-01"></option>
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
<option value="lundu-01">JALAN SEKETI</option>
<option value="sriaman-01">JALAN FOO CHOW</option>
<option value="sriaman-02">JALAN SABU</option>
<option value="betong-01">JALAN TANJUNG ASSAM</option>
</select></td>
</tr>

The reason is that you are saving the value of the selected option in #kuarter, and not the text that's displayed in the e.g. the value for the option you are selecting is kuching-01:
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
As other code depends on the value, you can't change the option value to match the text you want.
What we can do instead is save the text in a hidden input that will get submitted with the form. For this to work, the input has to have the same name as the option currently has, so that your processing code will recognise it.
To do this we need to:
Change the name of the select so that our new hidden input can use the name pilih_kawasan and sumbit the value for processing, e.g. <select name="pilih_kawasan_select" id="kawasan">
Add a hidden input to your form with the name pilih_kawasan to store the text, e.g.: <input type="hidden" name="pilih_kawasan" id="pilih_kawasan_value" value="">
Add javascript function to update the value of the hidden field #pilih_kawasan_value with the selected text (i.e. not value).
Call this function every time the #kuarter dropdown changes. This needs to be done in 2 places: when a new value is selected in #kuarter, and also when the value of 'kawasan' changes (because that changes the values in #kuarter).
Working snippet
The HTML & jQuery below are working here, run the snippet to see what its doing.
$(document).ready(function() {
var $options = $("#kuarter").clone();
$("#kawasan").change(function() {
var filters = [];
if ($(this).val() == "") {
$(this).find("option").each(function(index, option) {
if ($(option).val() != "")
filters.push($(option).val());
});
} else {
filters.push($(this).val())
}
$("#kuarter").html("");
$.each(filters, function(index, value) {
$options.find("option").each(function(optionIndex, option) {
if ($(option).val().startsWith(value)) {
$(option).clone().appendTo($("#kuarter"));
// (4.) ADDED: the #kuarter values have changed, so update the hidden input to the selected text
selected_text = $("#kuarter option:selected").text(); // get the text from the selected option
setKuarterValue(selected_text); // call our function to update the hidden input
}
});
});
});
// (4.) ADDED: Update the hidden input any time the #kuarter dropdown is changed
$("#kuarter").change(function() {
// get the text from the selected option in #kawasan
selected_text = $("#kuarter option:selected").text();
setKuarterValue(selected_text); // call our function to update the hidden input
});
});
/* (3.) function to set the values of the hidden input "#pilih_kuarter"
that will be submitted to your processing code. */
function setKuarterValue(myval) {
// if the value hasn't changed , no need to update
if ($("#pilih_kuarter").val() == myval) return;
// set the value of the hidden input with the selected text
$("#pilih_kuarter").val(myval);
// just for testing, so we can see the value that will be submitted - delete when its working for you
console.log ("Set pilih_kuarter value = "+ myval);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kawasan:</td>
<td>
<!-- (1.) UPDATED: Change the name of the select, as we're going to submit our hidden input using this name instead -->
<select name="pilih_kawasan" id="kawasan">
<option value="none">SILA PILIH</option>
<option value="kuching">KUCHING</option>
<option value="lundu">LUNDU</option>
<option value="sriaman">SRI AMAN</option>
<option value="betong">BETONG</option>
</select>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Kuarter:</td>
<td>
<select name="pilih_kuarter_select" id="kuarter">
<option value="none-01"></option>
<option value="kuching-01">JALAN DURIAN BURONG STAMPIN</option>
<option value="lundu-01">JALAN SEKETI</option>
<option value="sriaman-01">JALAN FOO CHOW</option>
<option value="sriaman-02">JALAN SABU</option>
<option value="betong-01">JALAN TANJUNG ASSAM</option>
</select>
</td>
</tr>
<!-- (2.) ADDED: add a new hidden input to store the required text
this must have the name=pilih_kuarter so it will submit the value to you database -->
<input type="hidden" name="pilih_kuarter" id="pilih_kuarter" value="">
</table>

This is the result..the value in kuarter's should be in kawasan's value and the kawasan's value should in kuarter's value

How to assign a different name for each radio input group

I'm looking for a solution to dynamically change the name for a group of input radio buttons.
I'm creating a travel itinerary where the user selects "domestic" or "international." That selection will hide/show the appropriate state/country dropdown below. There could be multiple destinations, therefore, I need multiple state/country selectors. The problem I'm running into is that all the inputs have the same name, so only one button will display as "checked" at any given time.
The code snippet will come in via an .ssi, so I can't just hard code the input name. I need a JavaScript/jQuery method of dynamically changing it as more destinations are added. The default is "destination." I'd like it to be "destination1," "destination2," etc. for each radio button group.
Here's a very watered-down version of the HTML (Not looking for a debate on table-based layouts. My team has already hashed that out):
<table>
<tbody>
<tr>
<td colspan="2">
<input type="radio" checked="checked" name="destination" class="js-trigger" data-destination="stateForm"> Domestic
<input type="radio" name="destination" class="js-trigger" data-destination="countryForm"> International
</td>
</tr>
<tr>
<td>Destination:</td>
<td>
<form class="stateForm list">
<select name="State" id="state-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="Select State" selected="selected"></option>
<option value="Alabama" data-alternative-spellings="AL">Alabama</option>
<option value="Alaska" data-alternative-spellings="AK">Alaska</option>
<option value="Etc" data-alternative-spellings="Etc">Etc</option>
</select>
</form><!-- End State Form -->
<form class="countryForm list">
<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="Select Country" selected="selected"></option>
<option value="Afghanistan" data-alternative-spellings="AF افغانستان">Afghanistan</option>
<option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
<option value="Etc" data-alternative-spellings="Etc">Etc</option>
</select>
</form><!-- End Country Form -->
</td>
</tr>
</tbody>
</table>
Here's my fiddle: http://jsfiddle.net/Currell/9sr5rkjy/2/
I'm a bit of a JavaScript beginner, so forgive me if my process, terminology, or my code is a bit off.

You could re-name them by adding this:
var counter = 0;
$('table').each(function(){
$(this).find('input[type=radio]').attr('name','destination'+counter);
counter++;
})
jsFiddle example
Update: I just noticed that all your select elements are duplicating name and ID attributes. To fix that you can change the code to:
var counter = 0;
$('table').each(function () {
$(this).find('input[type=radio]').attr('name', 'destination' + counter);
$(this).find('select').eq(0).attr({
'name': 'State' + counter,
'id': 'state-selector' + counter
});
$(this).find('select').eq(1).attr({
'name': 'Country' + counter,
'id': 'country-selector' + counter
});
counter++;
})
jsFiddle example

You need to change them in groups (currently grouped in TDs):
$("td:has(':radio')").each(function(index){
var $radio = $(this).find(':radio');
$radio.attr("name", $radio.attr('name') + index);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9sr5rkjy/5/
This will rename each set to name="destination0", name="destination1" etc.
You have duplicated ID fields too, which is invalid HTML, so you need to apply a similar fix to those. jQuery and Javascript can only find the first occurence of an ID as browsers use a fast lookup dictionary (with only one element stored against each ID value).