Möchten div basierend auf Dropdown-Box-Auswahl anzeigen/ausblenden

Ich möchte jQuery zeigen div id = 'Geschäft' nur, wenn 'Business-Verwendung' in der Dropdown-Box ausgewählt ist.Möchten div basierend auf Dropdown-Box-Auswahl anzeigen/ausblenden

Dies ist mein Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$('#purpose').on('change', function() { 
    if (this.value == '1'); 
    { 
    $("#business").show(); 
    } 
    else 
    { 
    $("#business").hide(); 
    } 
}); 
}); 
</script> 
<body> 
<select id='purpose'> 
<option value="0">Personal use</option> 
<option value="1">Business use</option> 
<option value="2">Passing on to a client</option> 
</select> 
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
</body>

und die JSFiddle: http://jsfiddle.net/2kGzZ/1/

Quelle

2014-02-05 user3263266

Wickeln Sie den Code innerhalb $(document).ready(function(){...........}); Handler, entfernen Sie auch die ; nach if

$(document).ready(function(){ 
    $('#purpose').on('change', function() { 
     if (this.value == '1') 
     //.....................^....... 
     { 
     $("#business").show(); 
     } 
     else 
     { 
     $("#business").hide(); 
     } 
    }); 
});

Fiddle Demo

Quelle

2014-02-05 17:56:14

Oder legen Sie es am Ende des Dokuments. – j08691

oder Ereignisdelegation – Satpal

Danke dafür! Es funktioniert perfekt jetzt :) – user3263266

Sie haben Fehler im Code unexpected token .use:

$('#purpose').on('change', function() { 
    if (this.value == '1') { 
    $("#business").show(); 
    } else { 
    $("#business").hide(); 
    } 

    });

Demo

Update: Sie können den Code verengen mit .toggle()

$('#purpose').on('change', function() { 
    $("#business").toggle(this.value == '1'); 
});

Quelle

2014-02-05 17:58:36

Sie müssen entweder Ihre setzen Code am Ende der Seite oder wickeln Sie es in einem Dokument bereit Anruf, sonst versuchen Sie, Code für Elemente, die Sie nicht ausführen t existieren.

$('#purpose').on('change', function() { 
    $("#business").css('display', (this.value == '1') ? 'block' : 'none'); 
});

jsFiddle example

Quelle

2014-02-05 17:58:57 j08691

Das Kernproblem ist die js Fehler: Auch können Sie Ihren Code reduzieren

$('#purpose').on('change', function() { 
    // if (this.value == '1'); { No semicolon and I used === instead of == 
    if (this.value === '1'){ 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
}); 
// }); remove

http://jsfiddle.net/Bushwazi/2kGzZ/3/

Ich hatte aufzuräumen die html & js ... Ich konnte mir nicht helfen.

HTML:

<select id='purpose'> 
    <option value="0">Personal use</option> 
    <option value="1">Business use</option> 
    <option value="2">Passing on to a client</option> 
</select> 
<form id="business"> 
    <label for="business">Business Name</label> 
    <input type='text' class='text' name='business' value size='20' /> 
</form>

CSS:

#business { 
    display:none; 
}

JS:

$('#purpose').on('change', function() { 
    if(this.value === "1"){ 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
});

Quelle

2014-02-05 18:05:37

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $('#purpose').on('change', function() { 
     if (this.value == '1') 
     //.....................^....... 
     { 
      $("#business_new").hide(); 
     $("#business").show(); 
     } 
     else if (this.value == '2') 
     { 
      $("#business").hide(); 
     $("#business_new").show(); 
     } 
     else 
     { 
     $("#business").hide(); 
     } 
    }); 
}); 
</script> 
<body> 
<select id='purpose'> 
<option value="0">Personal use</option> 
<option value="1">Business use</option> 
<option value="2">Passing on to a client</option> 
</select> 
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
<div style='display:none;' id='business_new'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value="1254" size='20' /> 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
</body>

Quelle

2015-06-11 04:30:31

diese versuchen, die für mich in meinem Test-Demo arbeitet

<script> 
$(document).ready(function(){ 
$('#dropdown').change(function() 
{ 
// var selectedValue = parseInt(jQuery(this).val()); 
var text = $('#dropdown').val(); 
//alert("text"); 
    //Depend on Value i.e. 0 or 1 respective function gets called. 
    switch(text){ 
     case 'Reporting': 
      // alert("hello1"); 
    $("#td1").hide(); 
      break; 
     case 'Buyer': 
     //alert("hello"); 
    $("#td1").show(); 
      break; 
     //etc... 
     default: 
      alert("catch default"); 
      break; 
    } 
}); 
}); 

</script>

Quelle

2017-07-05 12:39:00 user8259249

langweilige Lösung ... –

Möchten div basierend auf Dropdown-Box-Auswahl anzeigen/ausblenden

Antwort

Verwandte Themen