We Keep Coding

ComboBox hide and show div

I have a problem in populating or regarding the response of my javascript.
I have two different which is and . The div#individual represents the first form that has a a div#address. And I have my second div which is the div#group. My problem is when i choose the "individual" in the subtype combobox the div#address works perfectly but when it comes to the "group" in the subtype combobox it doesn't respond like the first one. I set the div#address with the same class. Didn't work.
How ca I solved this?
Note: Im just using .hide() and .show() for both div#individual and div#group. Thanks!

the inputs of address for individual and the inputs of address for group should use different id and name.

The below code is useful for u please try it?
<script id="main" type="text/javascript">
$(document).ready(function()
{
var val=$("#selectid option:selected").text();
if(val == "Internet")
{
$("#new1").show();
$("#new2").hide();
}
else if(val == "Media")
{
$("#new1").hide();
$("#new2").show();
}
$('#selectid').change(function()
{
var val=$(this).val();
$("#internet").val('');
$("#media").val('');
if(val == "Internet")
{
$("#new1").show();
$("#new2").hide();
}
if(val == "Media")
{
$("#new1").show();
$("#new2").hide();
}
val = "";
});
});
</script>

How do I disable input field when certain select list value is picked

How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}

The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}

If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/

How do I check if value is empty?

I have a few select menus that include blank options. When both are blank (usually on the first page load), I would like to show some hidden div.
This is what I have:
$('.variant_options select').each(function() {
if ($(this).attr('value') === '') {
// some code here to show hidden div
console.log("No options chosen");
}
});
This doesn't seem to work.
Edit 1
For what it's worth, I have tried something like this:
if (!$(this).attr('value'))
And that has seemed to work, but it breaks functionality elsewhere.

<select> elements don't have a value attribute, so you need to use .val() on the element to find out if the currently selected option is empty.
if ($(this).val() === '') {
// value of select box is empty
}
this.value === '' should also work
To check whether no options are selected:
if (this.selectedIndex == 0) {
// no option is selected
}

You can do so by using the following:
if($(this).val() === '') {
// value is empty
}
I believe also the following too:
if(!$(this).prop('value')) {
// It's empty
}

You can simply do this:
$('.variant_options select').each(function () {
if ($.trim($(this).val()) === '') {
// some code here...
}
});

jQuery can check for value by using $(this).val()
So you would do if ($(this).val === '')`
If you wanted to check for some other attribute, like href or src, you could do
if ($(this).attr('href') === ''

In case if you have spaces, use this trick:
if ($.trim($(this).val()) === '') { ...

Why is this javascript not working - select box if

I have this code on my site. The idea is to hide a specific class when a specific select box value is selected.
This is my code
$(document).ready(function(){
var txt = 'Marketing';
$("div.ginput_container select#input_3_1 option").each(function(){
if($(this).val()==txt){
$('.mar').hide();
}
});
});
The result I'm getting is .mar class being hidden as soon as the page is loaded. I can't see the error, I have also tryied with
var num = 1
but I have the same issue.

$(document).ready(function() {
var txt = 'Marketing';
$("#input_3_1").change(function () {
if ( this.value == txt ) $('.mar').hide();
});
});
Here's the fiddle: http://jsfiddle.net/9Cyxh/
If you want to show $('.mar') when a different option is selected, use toggle instead:
$('.mar').toggle( this.value != txt );
Here's the fiddle: http://jsfiddle.net/9Cyxh/1/
If you want this to also run on page load (before an option is manually selected), trigger the change event:
$(document).ready(function() {
var txt = 'Marketing';
$("#input_3_1").change(function () {
$('.mar').toggle( this.value != txt );
}).change();
});​
Here's the fiddle: http://jsfiddle.net/9Cyxh/2/

You don't need the loop in the first place
Attach your select to the change() event handler and that should be it..
$(document).ready(function(){
$("select#input_3_1").on('change', function() {
var txt = 'Marketing';
if(this.value === txt){
$('.mar').hide();
};
}).change()
});

If you only want to hide ".mar" class when the value is changed and it equals "Marketing" try
$("#input_3_1").change( function() {
if( $(this).val().toUpperCase() === "MARKETING" ) {
$(".mar").hide();
}
});
Demo here

$("#input_3_1").change(function(){
if ($("#input_3_1").val()=='Marketing'){
$(".mar").hide();
}
});

html+javascript: How to disable null option in dropdownlist on some condtition

I have html page with a dozen dropdownlinst
One of them is
#Html.DropDownListFor(model => model.PrimaryNetworkInt, new SelectList(ViewBag.AvailableNetworks, "ID", "Name"), "Offline")
Second one store some other value, and when I change it to "AAA" I must disable in the fist one ability to choose NULL-oprtion (i.e. "Offline") (and return it back if was selected something else)
Select logic works fine:
$('#SecondDDList').change(function () { SecondDDListChanged(); });
var SecondDDListChanged() = function(){
//...
if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
//Here i need logic to disable NULL selection
} else {
//Here i need enable NULL option
}
}
What is better way to do it? May be something like:
$("#PrimaryNetworkInt option[value=null]").attr("disabled", "disabled");
Any suggestion?

You can use the methods .show() and .hide() for be shure the user can (or can not) select the value
$("#PrimaryNetworkInt").change(function() {
if ($(this).val()==-1){ //-1 i.e == "AAA" in my example
$("#PrimaryNetworkInt option[value='null']").hide();
} else {
$("#PrimaryNetworkInt option[value='null']").show();
}
});

jQuery(function () {
jQuery('#SecondDDList').find("option").each(function () {
if (jQuery(this).val() == -1 || jQuery(this).val() == "null" ) {
jQuery(this).attr("disabled", true);
}
});
});

To disable particular option just set its disabled attribute.
var SecondDDListChanged() = function(){
//...
if ($('#SecondDDList').val()==-1){ //-1 i.e == "AAA" in my example
$("#optionId").attr("disabled", "disabled");
} else {
$("#optionId").removeAttr("disabled", "disabled");
}
}