Develop Reference

JavaScript - Hide buttons depending on the options selected

I have two (or in some places more) dropdowns (select) with several options. There is also a button for clearing all selected values in dropdowns. There is one aspect of this clearing button that does not working properly for my needs.
The button is displayed only if dropdowns has selected option with value, after is selected options with empty value, button is hidden. After i choose some option in both dropdowns (button displayed) and then change value in one from this dropdowns to option without value (button is hidden). Problem is, that button is hidden after one from dropdowns has empty value.
I need that button to be hidden only if all dropdowns have a selected option with an empty value. This jsfiddle illustrates what I mean.
I use select2.js for the dropdowns.
HTML:
<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Javascript:
$('select').select2();
$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
$(".opt-clear").click(function() { $(".option select").select2("val", ""); });

You have to check the val from all lists. If at least one them has a value then dont hide the button. You have to use each() and a var as a flag.
Try:
$('.option select').change(function () {
var flag = 1;
$(".option select").each(function (index) {
var id = $(this).val();
if (id != "") {
flag = 0;
}
});
if (flag) {
$(".opt-clear").hide();
} else {
$(".opt-clear").show();
}
}).trigger('change');
DEMO

Use this code your problem will be solved:
HTML Code :
<input type="button" id="btnChangeddValue" onclick="ddChangeValue();" style="display: none;"
class="opt-clear" value="Clear all dropdowns">
<div class="option">
<select id="dd1" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="option">
<select id="dd2" onchange="ddChange(this.value);">
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
Js Script :
function ddChange(ddValue) {
if (ddValue != "" && ddValue != null) {
// $('#btnChangeddValue').css({ 'display': 'block' });
document.getElementById('btnChangeddValue').style.display = 'block';
}
else {
document.getElementById('btnChangeddValue').style.display = 'none';
}
}
function ddChangeValue() {
document.getElementById('dd1').value = "";
document.getElementById('dd2').value = "";
document.getElementById('btnChangeddValue').style.display = 'none';
}
Reguards,
Hardik Patel

hi I would try to get all the select with value. if their count is greater than 0 than button should be displayed. you can achieve that with jquery filter funstion
if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
//show button
}
else{
//hide button
}

Updated your fiddle.
$('.option select').change(function() {
checkvalue();
if(flag){
$('input').show();
}else{
$('input').hide();
}
}).trigger('change');
function checkvalue(){
$('.option select').each(function(){
if ($(this).val()!="") {
flag = true;
}else{
flag = false;
}
});
}
Your DOM has multiple select tags. So your code did not work.

Jquerymobile select menu disable options

Hi i am finding hard time to make this work, In my jquery Mobile app i have 3 slelect menus with options common in all the menus, code is as below
<select class="mySelect4" data-corners="false" id="objective1" >
<option value=1>Select</option>
<option value=2>Generate</option>
<option value=3>Increase</option>
<option value=4>Enhance customer engagement</option>
</select>
<select class="mySelect5" data-corners="false" id="objective2" >
<option value=1>Select</option>
<option value=2>Generate</option>
<option value=3>Increase</option>
<option value=4>Enhance</option>
</select>
<select class="mySelect6" data-corners="false" id="objective3" >
<option value=1>Select objective 3</option>
<option value=2>Generate</option>
<option value=3>Increase</option>
<option value=4>Enhance</option>
</select>
if the user select one option in the fist select menu that option should be disabled in other two select menus.Any idea or solution is appreciated

$('#objective1').change(function(){
var value1=$(this).val();
$('#objective2').find("option").each(function(){
if($(this).val()==value1){
$(this).attr("disabled","disabled");
}
});
});
and same for objective2 and objective3 select box
i hope it will useful for u

Using Jquery its very simple. Below is the whole code.
$(document).ready(function(){
$('#objective1').change(function(event){
var selectedValue = $(this).val();
disableElements($('#objective2'),selectedValue);
disableElements($('#objective3'),selectedValue);
});
});
var disableElements = function($selectList,selectedValue){
$selectList.find('option').each(function(){
if($(this).val() === selectedValue){
$(this).attr('disabled','disabled');
}
else{
$(this).removeAttr('disabled');
}
});
}

Add a function onchange to each of your drop-downs like this:
<select onchange="disableOther(this)" class="mySelect4" data-corners="false" id="objective1">
Then try this in js:
function disableOther(data) {
$('select').not(data).each( function() {
$('option[value=' + $(data).val() + ']', this).attr('disabled', 'disabled');
});
}
HERE IS A DEMO

How to select option to change value select option by jquery

I have 2 <select> inputs. If I select an option in the first input, I want to filter the options by id based on the selected option of the first input.
I have defined id for each options in the second input ("prod"+id)
This is HTML:
<select id="provider" name="provider">
<option selected="selected" value="">--- Select providers ---</option>
<option value="1">Provider 1</option>
<option value="2">Provider 2</option>
<option value="3">Provider 3</option>
</select>
<select id="product" name="product">
<option id="" value="" selected="selected">--- Select products ---</option>
<option id="prod2" value="1">Product 1</option>
<option id="prod2" value="2">Product 2</option>
<option id="prod2" value="3">Product 3</option>
<option id="prod3" value="4">Product 4</option>
<option id="prod1" value="5">Product 5</option>
<option>
</select>
This is my jQuery code:
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
$('#prod1').val(filter);
})
})
})
I want to show products from the selected provider only.
Online Demo: http://jsfiddle.net/notfoundlife/BCedV/1/

Assuming your html above, I think this should work for you.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#product option[value=' + filter +']').attr('selected', 'selected');
});
});

I think your issue is that you are not selecting the individual options, but the whole select list, so everything is hiding. Try changing the selector like this and go from there.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type option').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
})
})
})

How to check if an item is selected from an HTML drop down list?

I have a drop drown list and I am having trouble checking whether or not a value has been selected from the drop down list
Below is my HTML Code :
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br/>
Below is my JavaScript Code :
var card = document.getElementByName("cards")[0].value;
if (card.value == selectcard) {
alert("Please select a card type");
}

Well you missed quotation mark around your string selectcard it should be "selectcard"
if (card.value == selectcard)
should be
if (card.value == "selectcard")
Here is complete code for that
function validate()
{
var ddl = document.getElementById("cardtype");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "selectcard")
{
alert("Please select a card type");
}
}
JS Fiddle Demo

<script>
var card = document.getElementById("cardtype");
if(card.selectedIndex == 0) {
alert('select one answer');
}
else {
var selectedText = card.options[card.selectedIndex].text;
alert(selectedText);
}
</script>

You can check if the index of the selected value is 0 or -1 using the selectedIndex property.
In your case 0 is also not a valid index value because its the "placeholder": <option value="selectcard">--- Please select ---</option>
LIVE DEMO
function Validate()
{
var combo = document.getElementById("cardtype");
if(combo.selectedIndex <=0)
{
alert("Please Select Valid Value");
}
}

function check(selId) {
var sel = document.getElementById(selId);
var dropDown_sel = sel.options[sel.selectedIndex].text;
if (dropDown_sel != "none") {
state=1;
//state is a Global variable initially it is set to 0
}
}
function checkstatevalue() {
if (state==1) {
return 1;
}
return false;
}
and html is for example
<form name="droptest" onSubmit="return checkstatevalue()">
<select id='Sel1' onchange='check("Sel1");'>
<option value='junaid'>Junaid</option>
<option value='none'>none</option>
<option value='ali'>Ali</option>
</select>
</form>
Now when submitting a form first check what is the value of state if it is 0 it means that no item has been selected.

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<script>
var card = document.getElementById("cardtype");
if (card.options[card.selectedIndex].value == 'selectcard') {
alert("Please select a card type");
return false;
}
</script>

I believe this is the most simple in all aspects unless you call the validate function be other means. With no/null/empty value to your first option is easier to validate. You could also eliminate the first option and start with the most popular card type.
<form name="myForm">
<select id="cardtype" name="cards">
<option value="">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="validate()"></form>
<script>
function validate() {
if (document.myform.cards.value == "") {
alert("Please select a card type");
document.myForm.cards.focus();
}
</script>

function checkSelected() {
if (optionsId.selectedIndex < 0) {
alert("Please select an item from options");
return false;
}}

Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();
if(selectedOptions.size() > 0){
return true;
}else{
return false;
}

simple jQuery validation failed

I want to validate my value, but doesnt quite work if someone could help me out
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged);
countrySelectChanged();
var valid;
$('#click').click(function(){
if ($("#us-select").val() =="" || $("#germany-select").val() =="" ){
valid = false;
} else {
valid = true;
}
if (!(valid)) {
$('#msg').html('NOt Passed')
} else {
$('#msg').html('Pass')
}
});
});
Here is HTML
<select id="country-select">
<option value="none" >---</option>
<option value="us" >US</option>
<option value="germany">Germany</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="none" >---</option>
<option value="austin" >Austin</option>
<option value="austin2" >Austin2</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="none" >---</option>
<option value="berlin">Berlin</option>
<option value="berlin2">Berlin2</option>
</select>
<select id="none-select" class="sub-menu hide">
<option value="none" >---</option>
</select>
click me
<div id="msg"></div>​
This is online version
http://jsfiddle.net/RPWPZ/14/

Working Demo http://jsfiddle.net/SJ7Sg/ or http://jsfiddle.net/95zXa/
To get the selcted option you need to do this $("#us-select option:selected").val()
API => http://api.jquery.com/selected-selector/
Rest it should fit the cause :)
code
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged);
countrySelectChanged();
var valid;
$('#click').click(function(){
if ($("#us-select option:selected").val() =="none"){
valid = false;
}else{
valid = true;
}
if (valid) {
$('#msg').html('Success')
return false;
} else {
$('#msg').html('Fail')
}
});
});
​

if ($('#country-select').val() =="us") {
valid = false;
} else

you must change
$("#us-select").val() =="" || $("#germany-select").val() ==""
with
$("#us-select").val() =="none" || $("#germany-select").val() =="none"
because your default value of select is "none" ->
<select id="country-select">
<option **value="none"** >---</option>
<option value="us" >US</option>
<option value="germany">Germany</option>
</select>