We Keep Coding

How shoud I put a condition correlated with the select option value

I'm writing a code which reads a drop down value then perform some actions, and I try to figure out how to get the select option value and put a condition regarding to that one.
<script>
var e = document.getElementById("selectNewBalance");
var value = e.options[e.selectedIndex].value;
if (value == "Inserted values"){
/// from here to the return statement I know for sure it works but now i'm trying to apply this condition only when the select option is "Inserted values"
var checkThisOnes = ["Value1", "Value2", "Value3"];
var printThisOnes = []
var message = "Please fill these fields: "
$('#myform').submit(function() {
var result=true;
for (i = 0; i < checkThisOnes.length; i = i + 1) {
var checkedValue = $('#'+checkThisOnes[i]).val();
if (checkedValue === undefined || checkedValue === "") {
message = message + checkThisOnes[i]+ ", ";
result =false;
}
}
if (result === false) {
alert(message)
location.reload();}
return result;
});}
</script>

Reading the value from a dropdown is easier than how you did it:
var select = document.getElementById("selectNewBalance");
// add an event listener to the element
select.addEventListener('change', function(e) {
if (e.target.value === 'Inserted values') {
console.log('You can do something here')
}
})
<select id="selectNewBalance">
<option selected disabled>--</option>
<option value="Inserted values">Inserted values</option>
<option value="Other">Other</option>
</select>
With jQuery the snippet looks like:
jQuery('document').ready(function($) {
$('#selectNewBalance').on('change', function(e) {
if ($(this).val() === 'Inserted values') {
console.log('You can do something here')
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNewBalance">
<option selected disabled>--</option>
<option value="Inserted values">Inserted values</option>
<option value="Other">Other</option>
</select>
That is all. The point is, you need to place your conditions in an event, like change, so it runs when the input value changes.

How to make text-box disable with option value

I had tried to make text box disable. It's working when I take only single value. When I give or condition like "1" || "2" || "6" the text box is not being disabled. And if I select value "6" then one text box should exist.
I've tried this code:
$('#education').on('change', function() {
if ($(this).val() == "6" || "1" || "4") {
$('#degree').prop("disabled", true);
} else {
$('#degree').prop("disabled", false);
}
$('#txtData').show();
else
$('#txtData').hide();
});
See also the following Fiddle.
What shall I change?

Actually there are few errors in the code you wrote, that needs to be fixed:
To compare a value with three multiple values you can't just call,
$(this).val() == "6" || "1" || "4" . You need to compare $(this).val() with each one of these values separately, or you can put these values in an array and check if the value exists.
You are trying to get an element with ids degree and
education that don't exist in the page, make sure to refer existing elements.
And there's a last else mis-placed, when you want to execute
multiple statements when a condition is true just put them all in
the same if/else block.
If you want to check for a specific value among these 3 values, you can use an inner if block inside the first one, to do it.
This is how should be your code:
$('#myselect').on('change', function() {
if (["6", "1", "4"].indexOf($(this).val()) > -1) {
$('#txtData').prop("disabled", true);
if ("4" == $(this).val())
$('#txtData').hide();
else
$('#txtData').show();
} else {
$('#txtData').prop("disabled", false);
$('#txtData').show();
}
});
Demo:
$('#myselect').on('change', function() {
if (["6", "1", "4"].indexOf($(this).val()) > -1) {
$('#txtData').prop("disabled", true);
if ("4" == $(this).val())
$('#txtData').hide();
else
$('#txtData').show();
} else {
$('#txtData').prop("disabled", false);
$('#txtData').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Two</option>
<option value="5">Three</option>
<option value="6">Three</option>
</select>
<br /> Input: <input type="text" id="txtData" />

You can disable like this: http://jsfiddle.net/a8ZWx/390/
$('#education').on('change', function() {
if ($(this).val() == "6" || $(this).val() == "1" || $(this).val() == "4") {
$('#txtData').prop("disabled", true);
} else {
$('#txtData').prop("disabled", false);
}
});

Form validations with js

I'm trying to do validations with js, i have an input and a select, each one has an alert under it, those alerts appear when the input's value is less than 12, and when the user leaves the select empty, and there is a disabled button at the end of the form, it gets enabled if the value of the input == 12 or the select is not null, i tried something for the input only but i can't figure out how to put the select condition in the same function, here is my code:
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>

If you need to have the select with a null value selected by default, you have to add one more option in the top. You can add <option selected disabled>Select Something</option>. The disabled attribute will make it unselectable by the user after they click another option.
Then we need to add values to the options. Add an empty value in the default option we added before so it becomes <option selected disabled value="">Select Something</option>. Then, when the field change event fires, you can check the value of the select field and make the magic happen. I have updated your snippet bellow and added the above advice.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12)
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 ) {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
$('#requiredSelect').change(function () {
if ( document.getElementById("requiredSelect").value != "")
{
document.getElementById("requiredSelectAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredSelect").value === "" ) {
document.getElementById("requiredSelectAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
p{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option value="" disabled selected>Select something</option>
<option value="hi">Hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>

This is my version of you request. Using jquery to find the :selected element and get the text into the option tag. Also in each option you can set an value and get the .val() and will works.
$('#requiredInput').keyup(function () {
if ( document.getElementById("requiredInput").value.length == 12 && $('#requiredSelect').find(":selected").text() != "default")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if ( document.getElementById("requiredInput").value.length != 12 && $('#requiredSelect').find(":selected").text() == "default") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="requiredInput">
<p id="requiredAlert">Please fill out this field</p>
<select id="requiredSelect">
<option>default</option>
<option>hi</option>
</select>
<p id="requiredSelectAlert">Please select</p>
<button disabled id="disabledButton">Submit</button>

You could add to the condition... Something like:
$('#requiredInput').keyup(function () {
if (document.getElementById("requiredInput").value.length == 12 || document.getElementByid("requiredSelect").value != "Hi")
{
document.getElementById("requiredAlert").style.display = 'none';
document.getElementById("disabledButton").disabled = false;
} else if (document.getElementById("requiredInput").value.length != 12 && document.getElementByid("requiredSelect").value == "Hi") {
document.getElementById("requiredAlert").style.display = 'block';
document.getElementById("disabledButton").disabled = true;
}
});
and add to your htm:
<select id="requiredSelect">
<option value='Hi'>Hi</option>
<option value='op1'>option 1</option>
<option value='opN'>option N</option>
</select>
On the other hand, you are using jQuery so you could change you code to:
$('#requiredInput').keyup(function () {
if ($("#requiredInput").val().length == 12 || $("#requiredSelect").val() != "Hi")
{
$("#requiredAlert").css("display" : "none");
$("#disabledButton")prop("disabled", false);
} else if ($("#requiredInput").val().length != 12 && $("#requiredSelect").val() == "Hi") {
$("#requiredAlert")css("display" : 'block');
$("#disabledButton")prop("disabled", true);
}
});

Disable select attribute after another select option with javascript

i have -/+50 select option with looping. i want disable selection after select another selection According to id.
Javascript code (hide option) :
<script type="text/javascript">
function check(element)
{
d=document;
drops = d.getElementsByName('drop').length;
opts = 99;
for (i=1;i<drops+1;i++)
{
if (element.id != 'drop'+i && element.value != '0')
{
for (z=0;z<opts;z++)
{
if (d.getElementById('drop'+i).options[z].value == element.value)
{
d.getElementById('drop'+i).options[z] = null;
break;
}
}
}
}
}
</script>
Javascript Code (disable select) :
<script>
function myDisable() {
document.getElementById("drop15").disabled = true;
document.getElementById("drop19").disabled = true;
document.getElementById("drop10").disabled = true;
}
</script>
Html Code :
<select id="drop1" name="drop" onchange="check(this); myDisable();">
<option value="0"></option>
<option value="3">One</option>
<option value="5">Two</option>
<option value="1">Three</option>
</select>
----------- loopping select +/-50 -----------------
i want to disable selection from input number for amount to be disabled

show and hide div depending upon selected checkbox with combobox option

I have used this multiselect checkbox with a combobox option..
JsFiddle
In my jsfiddle that checkbox with a combobox type will not work. I have too many codes. So, I didn't included. See this link for full codes I'm trying to show and hide the div content depending upon selected checkbox. it does not work. I tried this code separately (without a combobox checkbox only). it works. I have problem with checkbox with a combobox type. How do I show/hide div content based upon selected checkbox with combobox option?
Without Combobox Fiddle
Javascript
document.getElementById("option_1").onclick = function() {
if(this.checked)
document.getElementById('choose_the_correct_answer').style.display = "block";
else
document.getElementById('choose_the_correct_answer').style.display = "none";
}
I have tried this Jquery code too
$(document).ready(function(){
$('#option_1').on('change', function() {
if ( this.value == '1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
HTML
<select id="control_3" name="control_3[]" multiple="multiple" size="5">
<option value=""></option>
<option id="option_1" value="option_1">Choose the Correct Answer</option>
<option id="option_2" value="option_2">Fill in the Blanks</option>
<option id="option_3" value="option_3">True or False</option>
<option id="option_4" value="option_4">Match the Following</option>
<option id="option_5" value="option_5">Two Mark Questions</option>
<option id="option_6" value="option_6">Five Mark Questions</option>
<option id="option_7" value="option_7">Others</option>
</select>
<div id="choose_the_correct_answer">choose the correct answer</div>
<div id="fill_in_the_blanks">fill in the blanks</div>
<div id="true_or_false">true or false</div>
<div id="match_the_following">match the following</div>
<div id="two_mark_questions">two mark questions</div>
<div id="five_mark_qustions">five mark questions</div>
<div id="others">others</div>

try
$('#option_1').on('click', function() {
});
and
the condition should be
if ( this.value == 'option_1')
JSFIDDLE
$(document).ready(function(){
$('#option_1').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
UPDATE:
AND a better option will be to use .togggle() if you intend to use multiselect
UPDATED DEMO
JS:
$(document).ready(function(){
$('option').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").toggle();
}
else if ( this.value == 'option_2')
{
$("#fill_in_the_blanks").toggle();
}
else if ( this.value == 'option_3')
{
$("#true_or_false").toggle();
}
else if ( this.value == 'option_4')
{
$("#match_the_following").toggle();
}
else if ( this.value == 'option_5')
{
$("#two_mark_questions").toggle();
}
else if ( this.value == 'option_6')
{
$("#five_mark_qustions").toggle();
}
else if ( this.value == 'option_7')
{
$("#others").toggle();
}
});
});
New Update: using normal dropdown with multiselect
use
$('select').on('change', function() {
FIDDLE