Develop Reference

I made multiple selection on the dropdown but in Javascript alert, showing 1 value only

I add multiple on my dropdown list. But, when I check the values via Javascript with alert, it just showing the first one that I selected.
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :</label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
<option value="" selected > Select Quantity</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>
</p>
</div>
Below is Javascript.
var affectedwaferid = document.translot.affectedwaferid.value;

As I posted in the comment,in order to get the multiple selected values, you need to use selectedOptions instead
function showSelected(){
var options = document.getElementById('affectedwaferid').selectedOptions;
var values = Array.from(options).map(({ value }) => value);
alert(values)
document.getElementById("selected-result").innerHTML = values;
}
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :
<span id="selected-result"></span>
</label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple onchange="showSelected()">
<option value="title" selected > Select Quantity</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>
</p>
</div>

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 multiply 2 numbers form select options and sum the result

I have a form field with 2 select options for my services (logo design and letterhead design) where I want users to select the number of either logo or letter head designs they want or both.
For instance, they can select 2 logo design and 3 letter head designs. There is a fixed amount for both designs. All I want is for them to select the number they want and they can preview the total amount for all before they make payment.
I have my forms done and I can also see the amount for each select option but I'm stuck at calculating both services together.
I'm not too good at javascript but I understand a little.
//Calculate branding amount by selected option
function logo(val) {
var logo = val * 20000;
document.getElementById("ansval").value = logo;
var letterhead = vall * 20000;
document.getElementById("ansval").value = letterhead;
document.getElementById("ansval").value = logo + letterhead;
}
<form>
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

To make this work it would be better to have your function read both the selected values from the DOM, instead of passing in a single value and then trying to figure out what the other one should be. Then you can perform the calculation quite simply and update the #ansval element with the outcome.
Note the use of parseInt() in the below example so that the values are treated as numbers to be added instead of string to be concatenated. Also note the use of unobtrusive event bindings. Using onchange and other inline event attributes is bad practice and should be avoided where possible.
With all that said, try this:
let logoEl = document.querySelector('#logonumber');
let letterheadEl = document.querySelector('#letterheads');
logoEl.addEventListener('change', calcTotal);
letterheadEl.addEventListener('change', calcTotal);
function calcTotal() {
var numLogo = (parseInt(logoEl.value, 10) || 0) * 20000;
var numLetterHead = (parseInt(letterheadEl.value, 10) || 0) * 20000;
document.querySelector("#ansval").value = numLogo + numLetterHead;
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber">
<option value="0">0</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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads">
<option value="0">0</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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>

Your function have to take both the submitted value for proper calculation. i just modified your code a little bit and it's done.
function logo(val)
{
var logo = document.getElementById("logonumber").value;
var letterhead = document.getElementById("letterheads").value;
document.getElementById("ansval").value = (logo * 20000) + (letterhead * 20000);
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<option value="0">0</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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option value="0">0</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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

How To Control Dropdown Select Options Menu With Jquery

I am creating a web site. In this web site there is a form and user has to input details. So , in this form , I have added 2 dropdowns like below. Now I want, when I select number 9 from Adults menu, I want to disable children menu. Otherwise if the number is 8 or less than 8, still user can select from children menu. Then I used length in jquery. But, that not what I want.
How can I do this?
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
var st = $('#adults option:selected');
if (st.length > 8) {
$("#children").prop('disabled', true);
}
});
alert(Total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
</div>
Search Flight Data
</form>

You just need to change length to
if (st.val() > 8)
DEMO: https://codepen.io/creativedev/pen/ERpXOa
To enable back when value is different:
if (st.val() > 8)
{
$("#children").prop('disabled', true);
}else{
$("#children").prop('disabled', false);
}

You should check against the selected value, not the length:
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
if (this.value > 8) { // check against the value of the adults drop down
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false); // probably need to re-enable it
}
});
// alert(Total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
</div>
Search Flight Data
</form>

want to disable my next button until my all option are filled using javascript

I have 6 dropdowns and next button and previous button.
i need to disable the next button until my 6 dropdowns are filled.
after filled all 6 drop drowns the "next" button wants to enable..
below code is the dropdown code:
<div class="q_category_details_right">
<img class="question_arrow1" src="left_arrow.png" id="firstpointer"/>
<div class="q_cell select_boxes margin_bottom_20">
<select onchange="currentChange(${jvar_question_number*2 +1}, this)" id="current${jvar_question_number*2 +1}">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N">N</option>
</select>
<img src="command_active.png" width="10" class="comment" id="imgCurrent${jvar_question_number*2 +1}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="target${jvar_question_number*2 +1}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgTarget${jvar_question_number*2 +1}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="importance${jvar_question_number*2 +1}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgImportance${jvar_question_number*2 +1}" onclick="popup(this)"/>
</div>
</div>
</div>
<j:if test="${questionsDB.next()}">
<div class="questions_content questionlist2" onClick="changeInstruct(2)">
<div class="q_category_details_left margin_bottom_20">
<div class="display_table padding_left_20">
<div class="left_float">
<p> ${jvar_question_number*2 +2}</p>
</div>
<div class="right_float">
<p>
${questionsDB.assessment_questions}
</p>
</div>
</div>
</div>
<div class="q_category_details_right">
<img style="display:none;" src="left_arrow.png" id="secondpointer" class="question_arrow2"/>
<div class="q_cell select_boxes margin_bottom_20">
<select onchange="currentChange(${jvar_question_number*2 +2}, this)" id="current${jvar_question_number*2 +2}">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N">N</option>
</select>
<img src="command_active.png" width="10" class="comment" id="imgCurrent${jvar_question_number*2 +2}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="target${jvar_question_number*2 +2}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgTarget${jvar_question_number*2 +2}" onclick="popup(this)"/>
</div>
<div class="q_cell select_boxes">
<select id="importance${jvar_question_number*2 +2}" disabled="true">
<option value=""></option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="N" class="hide">N</option>
</select>
<img src="comment_icon.png" width="10" class="comment" id="imgImportance${jvar_question_number*2 +2}" onclick="popup(this)"/>
</div>
</div>
</div>
the button id is "next"

$('select').on('change', function(){
var isEmpty = false;
$(select).each(function(){
if(!$(this).val()) {
isEmpty = true;
}
});
isEmpty ? $('your button id').prop('disabled', true) : $('your button id').prop('disabled', false);
});

You need to bind a change event to the select box and keep checking if all of them have been selected (assuming selecting means value != "" )
//bind an change event
$( ".select_boxes select" ).change( function(){
var allselectboxchecked = true;
$( ".select_boxes select" ).each( function(){
if ( $( this ).val() == "" )
{
allselectboxchecked = false;
}
} );
//if all select boxes are selected then enable your button
if ( allselectboxchecked )
{
//enable the button
}
} );