jquery show hide div basierend auf Wert auswählen

Question

Ich habe eine Auswahlliste mit vales 'all' und 'custom'. Bei der Auswahl mit dem Wert 'custom' sollte ein div mit der Klasse 'resources' angezeigt werden, und wenn der Wert 'all' ist, sollte es ausgeblendet werden.

Form ist:

<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> 

und Javascript hierfür ist:

ShowPrivileges: function() { 
    var Privileges = jQuery('#privileges'); 
    var select = this.value; 
    Privileges.change(function() { 
     if (select === 'custom') { 
      $('.resources').show(); 
     } 
    }); 
} 

Wie soll das aussehen, um zu arbeiten? Tut mir leid, ich weiß, das sollte einfach sein, aber ich bin neu mit all dem.

Answer 1

Sie benötigen val-Methode zu verwenden:

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/

Answer 2

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

Answer 3

Sie den Event-Handler hinzufügen möchten:

$("#privileges").change(craateUserJsObject.ShowPrivileges); 

Dann in Ihrem ShowPrivileges funciton:

var val = $("#privileges").val(); 
if(val == "whatever") 
    //do something 
else 
    //do something 

Answer 4

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

oder

var select=$('#privileges :selected').val() 
    if(select=='custom'){ 
    //some code 
    } 

Answer 5

Sie machen dies zu kompliziert:

First off, fallen die Inline-onclick. Da Sie jQuery verwenden, hängen Sie Ihren Handler dynamisch an.

<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> 

Zweitens nicht für den Klick hören und dann die change Handler anhängen. Bringen Sie es direkt

<script> 
jQuery('#privileges').on('change',function(){ 
    if(jQuery(this).val()=='custom'){ 
     jQuery('.resources').show(); 
    } else { 
     jQuery('.resources').hide(); 
    } 
}); 
</script> 

Answer 6

Sie den HTML-Code bereinigen kann durch die onClick fallen und die IDs aus den Optionen zu entfernen.

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> 

Und sie JavaScript konnte einfach tun:

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