ausblenden und werden 2 verschiedene Element Javascript oder Jquery

Question

Mein Code wie folgt aus ...

<label>Label : </label> 
<select name="gs"> 
    <option value="abc" id="xx" <?php echo (isset($_POST['gs']) && $_POST['gs'] == 'abc' ? 'selected="selected"' : '');?>>ABC</option> 
    <option value="cde" id="xx" <?php echo (isset($_POST['gs']) && $_POST['gs'] == 'cde' ? 'selected="selected"' : '');?>>CDE</option> 
    <option value="bbg" id="bbg" <?php echo (isset($_POST['gs']) && $_POST['gs'] == 'bbg' ? 'selected="selected"' : '');?>>BBG</option> 
</select><br /><br /> 

<div id="ini"> 
INI ini INI 
</div> 

<div id="itu"> 
ITU itu ITU 
</div> 

Dann, was ich machen möchte ist .. Wenn iam auf codition die Option BBG ausgewählt, die <div id="ini"> Element verstecken dann wird das <div id="itu"> Element

Bisher habe ich den Code nicht machen versuchen, zeigt, arbeiten, hier mein Code wie folgt ..

jQuery(function ($){ 
    $('#bbg').on('click',function(){ 
     $('#ini').hide(); 
     $('#itu').show(); 
    }); 

    $('#xx').on('click',function(){ 
     $('#ini').show(); 
     $('#itu').hide(); 
    }); 
    }); 

Answer 1

Pen: https://codepen.io/anon/pen/zzddqG

$('select[name="gs"]').on('change', function() { 
    var id = $(this).find('option:selected').attr('id'); 
    if (id === 'bbg') { 
     $('#ini').hide(); 
     $('#itu').show(); 
    } else { 
     $('#ini').show(); 
     $('#itu').hide(); 
    } 
}); 

Sie können das Ereignis onchange ein ausgesuchtes Dropdown bekommen. Wenn Sie wirklich Klicks auf die Option erhalten möchten, sollten Sie Folgendes verwenden: <option onclick="optionClicked()"></option>

Answer 2

Instea d auf click, müssen Sie verwenden, da das Ereignis für select Element ist. Überprüfen Sie den Code unten, werden sie zeigen/verstecken basierend auf der Auswahl:

$('select').on('change', function() { 
 
    if ($(this).val() == 'bbg') { 
 
    $('#ini').hide(); 
 
    $('#itu').show(); 
 
    } else { 
 
    $('#ini').show(); 
 
    $('#itu').hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Label : </label> 
 
<select name="gs"> 
 
    <option value="abc" id="xx">ABC</option> 
 
    <option value="cde" id="xx">CDE</option> 
 
    <option value="bbg" id="bbg">BBG</option> 
 
</select><br /><br /> 
 

 
<div id="ini"> 
 
    INI ini INI 
 
</div> 
 

 
<div id="itu"> 
 
    ITU itu ITU 
 
</div>