Develop Reference

Element by Name on load setting value

Trying to get the page to load with default selected option 2
Well neither are working, what's correct?
My HTML is like this, no ID or class
$(window).load(function() {
$("tour-adult[]").value = 3;
document.getElementById("tour-adult[]").value = 4;
});
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

Using jQuery:
Use .on('load', () {...} instead of .load() - Why?
Use an attribute selector like $("[attribute='attributeName']")
Pass the value as a String, not a Number
$(window).on('load', function() {
$('select[name="tour-adult[]"]').val('3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

As far as your first attempt, try selecting the select element by it's name attribute and using jQuery's val() method to set the value:
$("select[name='tour-adult[]']").val(3);
You currently don't have an id assigned to the select. If you want to go native, you'd use something like querySelector:
document.querySelector("select[name='tour-adult[]']").value = 4;
$(window).on('load', function() {
$("select[name='tour-adult[]']").val(3);
console.log($("select[name='tour-adult[]']").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

If you want to call it by ID, you will need to add an ID. I removed your jquery and added an ID and its working.
document.getElementById("tour-adult").value = 4;
<div class="tourmaster-combobox-wrap">
<select id="tour-adult" name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>

How to populate dynamic input field with dynamic select option in jquery

I am trying to populate input field with the value of selected option both are dynamically loaded. I am able to load selected option value and can update it when option changed. but if there are 10 input field and 10 select option tags and i select one option from 10 tags than all 10 input fields show same value. Every input field have 10 options. I need to change value individually .
here is function of jquery,
$("#myselect").change(function () {
$( "select option:selected" ).each(function() {
$('.returnValue').val($( this ).text());
});
});
I want to insert individual product quantity in input field.
I am struggling for two days please help.
<select id="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">

Use $(this).parent().next('.returnValue').val($( this ).text()); to set value to the next input field.
$(".myselect").change(function () {
$( "select option:selected" ).each(function() {
$(this).parent().next('.returnValue').val($( this ).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">
<select class="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">
<select class="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue" type="text" value="">

You can solve your problem in different ways:
If the select and input fields are one after another you may use:
$(this).next('.returnValue').val($( this ).val());
Another approach can be based on adding for each select a new attribute like:
input-field="newlass1"
And so add a new class to the corresponding input field in a way to link the select and input field.
In this case you can do it:
$('input.' + $(this).attr('input-field')).val($( this ).val());
The snippet:
$("[id^=myselect]").change(function () {
//$(this).next('.returnValue').val($( this ).val());
$('input.' + $(this).attr('input-field')).val($( this ).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="myselect1" input-field="newlass1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass1" type="text" value=""><br>
<select id="myselect2" input-field="newlass2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass2" type="text" value=""><br>
<select id="myselect3" input-field="newlass3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass3" type="text" value=""><br>
<select id="myselect4" input-field="newlass4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input class="returnValue newlass4" type="text" value="">

your problem is using the same class for all input fields, you need to set a different id for each input field
here's a plunker

Select web form elements with specific attribute

I have the following HTML form:
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
How to select using (JavaScript or jQuery) all SELECT's from my form (only those having catid attribute) and show its catid attribute values and selected option values?

You can use filter() method passing the attribute selector as parameter:
var cat = [];
$('select').filter('[name^="catid"]').each(function() {
cat.push($(this).attr('name'));
});
alert(cat);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>

You can use has attribute selector:
$('select[catid]');
And then iterate over returned elements using .each() and log the values and attributes.
Working Snippet:
$('select[catid]').each(function(){
console.log($(this).attr("catid"));
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>

$('select[name^=catid]').each(function() {
console.log($(this).attr("catid")); // get attribute using this
console.log($(this).val()); // get selected value using this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
</form>

I hope it should be help to you
var categories= $('[catid]').serialize();
console.log(categories);
This will be generate name and value mapping in querystring format you can use this string in ajax method as data as a post method.
See this: https://jsfiddle.net/gredztox/

You can use select[name^="catid"] method for selecting an multiple array elements with its name.
<script>
$(document).on('change','select',function(){
var catArr = [];
$('select[name^="catid"]').each(function() {
catArr.push($(this).val());
});
document.getElementById('result').innerHTML = catArr;
});
</script>
Your Final Output

Getting input value from a data attribute

I have this code below where user can choose - each dropdown option has different data-tenure:
<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
What I want is to set the input value to the data-tenure above - :
<input type="hidden" class="loan-rate" value="??" />
Do I need to add onchange() function to the dropdown above?

Edit, Updated
I meant - getting the data-tenure and this will be the input value. So
if the user selects 1, the input value will be 0.0298. If the user
selects 2 the input value will be 0.0387
You can use change event at .dropdown2 element, document.querySelector() with selector "input.loan-rate", set .value property with event.target Element.dataset at change event handler
document.querySelector(".dropdown2").addEventListener("change", function(event) {
// set value here
document.querySelector("input.loan-rate")
.value = event.target.dataset.tenure;
})

<select class="dropdown2 loan-tenure" id="selectId">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
$(document).ready(function(){
$("#selectId").change(function(){
alert($("#selectId option:selected").attr("data-tenure"));
alert($("#selectId").val());
});
});

Try the below code. Here we are passing the object via an onchange event.
<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select onchange="tenure_rates(this)" class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
function tenure_rates(dropdownValue) {
$('.dropdown2-opt').data('tenure',dropdownValue.value);
}
</script>

why don't you use select tag to take input
<select name="" form="tenureform">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>

<select onchange="changeInput()" class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
function onChange(evt) {
document.querySelector("input.loan-rate").dataset.tenure = evt.currentTarget.value;
}

This is a vanilla js solution. There will probably be tons of jquery responses. You do need the onchange event:
<select class="dropdown2 loan-tenure" onchange="document.getElementById('loanrate').value = this.options[this.selectedIndex].dataset.tenure">
Make sure you add the id 'loadrate' to your input. See it in action here.

You can use selectedIndex to get the the current selected option. Then use getAttributeto get the data-tenure attribute value.Use getElementsByClassName to select the hidden input element and set it's value.
function tenure_rates(){
var e = document.getElementById("dropdown2");
var _option = e.options[e.selectedIndex].getAttribute('data-tenure');
document.getElementsByClassName('loan-rate')[0].value = _option;
}
JSFIDDLE
Note: Initially the value of hidden field will always be empty,since 1 is pre selected. So if an user don't change the option you will never find any value set this hidden element. You can select an option like Select

Try it :
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="ten columns">
<input type="hidden" class="loan-rate" value="" />
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>
<script>
var sel = document.querySelector(".loan-tenure");
var hidEle = document.querySelector(".loan-rate");
sel.onchange = function(){
var value = sel.value;
hidEle.setAttribute("value",value);
alert("Input hidden value is : " + hidEle.getAttribute("value"));
}
</script>
</body>
</html>

Java Script DrobDown Disable Mark

Here is my question, for exp:
<select name="select1" >
<option value="default" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2" >
<option value="default" selected="selected">Default</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If I select (number 1) from (select1), then (select2) totally will be disabled. or if i select (number4) from (select2) then (select1) totally will be disabled.
I mean depends on select name, other select name will be disabled.
Is it possible to give me the java code for this ?
Thank you

Using jquery, it'd be something like this. jsfiddle
HTML:
<select id="select1" name="select1" >
<option value="default" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2" id="select2" >
<option value="default" selected="selected">Default</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
JS:
$('#select1').on('change', function(){
if($(this).val() != 'default'){
$('#select2').prop('disabled', true);
}
else{
$('#select2').prop('disabled', false);
}
});
$('#select2').on('change', function(){
if($(this).val() != 'default'){
$('#select1').prop('disabled', true);
}
else{
$('#select1').prop('disabled', false);
}
});
As I said, you need to correct your html as well. In your website, use the following html instead of what you have i.e. add ID's to your select dropdown.
<select id="select1" name="select1" ...
<select id="select2" name="select2" ...