jQuery erweiterte Auswahl Erkennung und klicken Sie auf

Question

Ich habe mehrere li, die ein Formular enthalten.

In dem Formular habe ich eine Auswahl mit ein paar Optionen in einem Dropdown-Menü.

Ich möchte ein Jquery-Skript erstellen, so dass, wenn Sie auf Senden klicken UND die Auswahl wurde von der Standardoption (ausgewählt) geändert, dann die li ausblenden. Die Li's haben eindeutige IDs.

Beispielcode:

<li id="<?php echo 'li_'.$unique ?>"> 
    <form id="<?php echo 'form_'.$unique ?>"> 
     <select id="<?php echo 'select_'.$unique ?>"> 
      <option value='apple' selected>Default</option> 
      <option value='pear'>Different</option 
     </select> 
     <input type="submit" id="<?php echo 'submit_'.$unique ?>"/> 
    </form> 
</li> 

Was ich hier erreichen wollen ..

// Script -> On .click submit and if selector != selected .hide this <li> 

$("<?php echo '#submit_'.$unique ?>").click(function(){ 
    $("<?php echo '#select_'.$unique ?>").change(function() { 
     if ($(this).val() != 'apple') { 
      $("<?php echo '#li_'.$unique ?>").hide(); 
     }; 
    }); 
}); 

Ich habe auch versucht ..

$("<?php echo '#submit_'.$unique ?>").click(function(){ 
    if ($("<?php echo '#select_'.$unique ?>").val() != 'apple') { 
     $("<?php echo '#li_'.$unique ?>").hide(); 
    }; 
}); 

Answer 1

Working Fiddle.

Sie müssen nicht den PHP-Code verwenden, um die js-Code generieren Sie eine globale Veranstaltung für die ganze li schaffen könnte:

$("[id^='submit_'").click(function(e){ 
    e.preventDefault(); 

    var unique = $(this).attr('id').split('_')[1]; 
    var default_value = $('#select_'+unique+' option:first').val(); 
    var current_value = $('#select_'+unique).val(); 

    if(current_value!=default_value) 
     $('#id_'+unique).hide(); 
}); 

Hoffnung, das hilft.

$("[id^='submit_'").click(function(e){ 
 
    e.preventDefault(); 
 

 
    var unique = $(this).attr('id').split('_')[1]; 
 
    var default_value = $('#select_'+unique+' option:first').val(); 
 
    var current_value = $('#select_'+unique).val(); 
 

 
    if(current_value!=default_value) 
 
    $('#id_'+unique).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="id_1"> 
 
    <form id="form_1"> 
 
     <select id="select_1"> 
 
     <option value='apple' selected>Default1</option> 
 
     <option value='pear'>Different1</option> 
 
     </select> 
 
     <input type="submit" id="submit_1"/> 
 
    </form> 
 
    </li> 
 
    <li id="id_2"> 
 
    <form id="form_2"> 
 
     <select id="select_2"> 
 
     <option value='apple' selected>Default2</option> 
 
     <option value='pear'>Different2</option> 
 
     </select> 
 
     <input type="submit" id="submit_2"/> 
 
    </form> 
 
    </li> 
 
</ul>