Develop Reference

Option value not changing with user selection

I have a form with the following dropdown selection menu in HTML:
<div class="input-field col s4">
<select id="disposition" required>
<option value="No_Sale" id="noSale">No Sale</option>
<option value="Sale" id="yeahSale">Sale</option>
<option value="Unreachable" id="noContact">Unreachable</option>
<option value="Call_Back" id="callBack">Call Back</option>
</select>
<label>Disposition</label>
</div>
The above snippet for dispositions should affect whether or not other form elements are disabled. However, I cannot seem to get the value to change on user input.
Here is the javascript with jQuery:
$(document).on('change', 'select', function(){
console.log(disposition);
console.log($("#yeahSale").selected == true);
if ($("#yeahSale").selected == true) {
$("#fund").removeAttr('disabled');
}
});
For both $("#disposition").val() and $("#yeahSale").selected, the console.log returns
"No_Sale"
and false when I click on the form element and select
"Sale."
The first thing I tried was:
if (disposition == "Sale")
I have also tried:
var disposition = $("#disposition").find(":selected").text();
I've been searching stack exchange and google for answers for almost an hour but I haven't any success so far. My apologies if I just completely missed an extant question that's already been solved.
Thanks for your help!

$("#disposition").val() gives you the value of selected option.
So you simply want to put condition according to the value you got selected.
$(document).on('change', '#disposition', function(){
/*
If you want to put condition based on
option with specific id is selected or not then
if($("#yeahSale").is(':selected')) {
}
*/
if ($("#disposition").val() == 'Sale') {
// Do here what you want to do
// $("#fund").removeAttr('disabled');
console.log("Sale Selected");
} else {
console.log("Selected Option is: "+ $("#disposition").val());
}
//Get Id attr of selected option
console.log("Id of selected option is: " + $(this).find('option:selected').attr('id'));
// Check weather option with specific Id is selected or not:
console.log($("#yeahSale").is(':selected'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s4">
<select id="disposition" required>
<option value="No_Sale" id="noSale">No Sale</option>
<option value="Sale" id="yeahSale">Sale</option>
<option value="Unreachable" id="noContact">Unreachable</option>
<option value="Call_Back" id="callBack">Call Back</option>
</select>
<label>Disposition</label>
</div>
If you want to get id attribute of selected option you can use this
$(this).find('option:selected').attr('id')
If you want to see option with ID yeahSale is selected or not than try this:
$("#yeahSale").is(':selected')

<div class="input-field col s4">
<select id="disposition">
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>
<label>Disposition</label>
</div>
<script>
$(document).on('change', function(){
alert($("#disposition").val());
console.log($("#yeahSale").selected == true);
if ($("#yeahSale").selected == true) {
$("#fund").removeAttr('disabled');
}
});
tested and found it working

var disposition = $('#disposition').val();
$('#disposition').change(function() {
disposition = $(this).val();
console.log(disposition);
}

All you need is disposition.value and an onchange event.
The script below will acknowledge user input and return the updated disposition.value whenever a new selection is made:
var disposition = document.getElementById('disposition');
disposition.addEventListener('change', function(){console.log(disposition.value);}, false);
<select id="disposition" required>
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>

Javascript : How to properly check if selected option is empty?

I have selected option here, I don't know why If I didn't choose any option that means (-select-) values="" no values, still not work. My select option is an array because it on the loop.
Here is my code
var randomGender_arr = [];
var tae = true;
if(randGender == 'random'){
$('select[name="randomGender[]"]').each(function(k,v){
if($(v).val()===''){
alert('Please select a gender')
}else{
randomGender_arr.push($(v).val());
}
});
}else{
}
Btw my selected option is here, as you can see my first option is disabled. How could it be consider as empty? And check if when I leave even 1 of the the option (-select-) then return false.
echo'<div style="float:right; position:absolute; top:10px; right:0;">
<label for="randomGender">Gender:</label>
<select name="randomGender[]" id="randomGender" class="form-control randomGender">
<option disabled readonly selected>-select-</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div style="clear:both;"></div>';

let changeTime = 0;
let opt = document.querySelector(".opt");
let submit = document.querySelector(".submit");
let notif = document.querySelector(".notif");
opt.addEventListener("change",function(){
changeTime++;
});
submit.addEventListener("click",function(){
if(changeTime != 0){
// Success
notif.textContent = "Success";
}else{
notif.textContent = "Please chose at less one time!";
}
});
<div class="opt" style="float:right; position:absolute; top:10px; right:0;">
<label for="randomGender">Gender:</label>
<select name="randomGender[]" id="randomGender" class="form-control randomGender">
<option disabled readonly selected>-select-</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div style="clear:both;"></div>
<button class="submit">Button</button>
<p class="notif"></p>

How to use if else statements in select form?

In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much

Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});

<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)

Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}

Selected value from select html tag not producing correct result in javascript if/else statement

** Edited: Thank you for your initial responses! After going through to build on my initial code I am at another roadblock. I am trying to allow the 'change' for all my selectors, but now it will update in my JS. Also, prior to adding the doStuff(document.querySelectorAll()); I was using document.getElementById().addEventListener('change'), which was allowing my if/else statement to run, but when trying to write it to the page it deleted out my html. I do not want that to happen as I would like it to either show after I run the function at the bottom if I want to update a selector or auto update as I go down and update my selectors. Once again I am grateful for the help.
I am new to coding so this my not be the prettiest code, but I am trying to learn.
My HTML code is as follows:
<body>
<form method="POST">
<div id="dynamicInput1">
<ul>
<strong>Is the individual/entire family under 30?</strong>
</ul>
<select id="myDropDown1">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="dynamicInput2">
<ul><strong>High utilizer of Healthcare? Examples:</strong>
<li>Takes prescription drugs</li>
<li>Goes to the doctor or specialist frequently</li>
<li>Managing a chronic condition</li>
<li>Or having a planned procedure</li>
</ul>
<select id="myDropDown2">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</form>
</body>
My JavaScript is as follows:
doStuff(document.querySelectorAll('myDropDown1, myDropDown2').addEventListener('change', function() {
var dropDown1 = document.getElementById('myDropDown1').value;
var dropDown2 = document.getElementById('myDropDown2').value;
if(dropDown1 === 'yes') {
alert('Holy Crap!')
} else if(dropDown2 === 'no') {
alert('Is this going to work?')
} else{
alert('WTF...')
};
}));

Probably you're defining your dropDown1 variable only once (maybe outside the callback function you pass to the event handler), and then it will never get updated.
If you define it inside the listener, it will work, since it will be updated with the new value. Look below:
document.getElementById('myDropDown1').addEventListener('change', function() {
var dropDown1 = document.getElementById("myDropDown1").value;
var dropDown2 = document.getElementById("myDropDown2").value;
if (dropDown1 === "yes") {
alert("Holy Crap!");
} else {
alert("WTF...");
};
});
<body>
<form method="POST">
<div id="dynamicInput1">
<ul><strong>Is the individual/entire family under 30?</strong>
</ul>
<select id="myDropDown1">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="dynamicInput2">
<ul><strong> High utilizer of Healthcare? Examples:</strong>
<li>Takes prescription drugs</li>
<li>Goes to the doctor or specialist frequently</li>
<li>Managing a chronic condition</li>
<li>Or have a planned procedure</li>
</ul>
<br>
<select id="myDropDown2">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</form>
</body>

Add an on change event to your select element:
<select id="myDropDown1" onchange="myFunction()">
Then define the function being called
function myFunction() {
var dropDown1 = document.getElementById("myDropDown1").value;
var dropDown2 = document.getElementById("myDropDown2").value;
if (dropDown1 === "yes") {
alert("Holy Crap!");
} else {
alert("WTF...");
};
}
One problem this way is you have to set an on change event for each select element in your html. If using JQuery:
$('select').change(function() {
//Do event with $this
});

I think this is what you want:
1) Add onchange function calls to your both drop-down selects. Along with retrieving the value during select.
2) Add two functions for both the drop-down's in your JavaScript.
Working : Demo
function dropdown1(val1) {
if (val1 == "yes") {
alert("Holy Crap!");
} else {
alert("WTF...");
}
}
function dropdown2(val2) {
if (val2 == "yes") {
alert("Holy Crap!");
} else {
alert("WTF...");
}
}
<form method="POST">
<div id="dynamicInput1">
<ul><strong>Is the individual/entire family under 30?</strong>
</ul>
<select id="myDropDown1" onchange="dropdown1(this.value)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="dynamicInput2">
<ul><strong> High utilizer of Healthcare? Examples:</strong>
<li>Takes prescription drugs</li>
<li>Goes to the doctor or specialist frequently</li>
<li>Managing a chronic condition</li>
<li>Or have a planned procedure</li>
<ul>
<br>
<select id="myDropDown2" onchange="dropdown2(this.value)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</form>

jQuery show/hide a div based on select value

I have a select list with values 'all' and 'custom'. On select with value 'custom' a div with class 'resources' should appear, and if the value is 'all' it should be hidden.
Form is:
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
And javascript for this is:
ShowPrivileges: function() {
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function() {
if (select === 'custom') {
$('.resources').show();
}
});
}
How should this look in order to work? Sorry, I know this should be simple, but I am new with all this.

You need to use val method:
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'custom') {
$('.resources').show();
}
else $('.resources').hide(); // hide div if value is not "custom"
});
http://jsfiddle.net/RWUdb/

You can clean up the HTML by dropping the onClick and removing the IDs from the options.
HTML:
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option value="all">All</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
And your JavaScript could simply do this:
$('#privileges').on('change', function() {
if($(this).val() === 'all') {
$('.resources').hide();
} else {
$('.resources').show();
}
});

Privileges.on('change',function(){
if($(this).val()=='custom'){
$('.resources').show();
}else{
$('.resources').hide();
}
})

You will want to add the event handler:
$("#privileges").change(craateUserJsObject.ShowPrivileges);
Then, within your ShowPrivileges funciton:
var val = $("#privileges").val();
if(val == "whatever")
//do something
else
//do something

$("#privileges").change(function(){
var select= $(this).val();
if(select=='custom'){
//some code
}
});
or
var select=$('#privileges :selected').val()
if(select=='custom'){
//some code
}

You are making this too complicated:
First off, drop the inline onclick. Since you are using jQuery, attach your handler dynamically.
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>
Secondly, don't listen for the click and then attach the change handler. Attach it directly
<script>
jQuery('#privileges').on('change',function(){
if(jQuery(this).val()=='custom'){
jQuery('.resources').show();
} else {
jQuery('.resources').hide();
}
});
</script>

That could be done with `toggle()` as a shorthand :
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
If you want to toggle the display in the page load you could trigger the same change() event, like :
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
}).change();
$('#privileges').change(function() {
$('.resources').toggle($(this).val() == 'custom');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>Privileges:</label>
<select name="privileges" id="privileges">
<option id="all" value="all">All</option>
<option id="custom" value="custom">Custom</option>
</select>
</div>
<div class="resources" style=" display: none;">resources</div>