javascript - jQuery 高级选择检测并单击

Question

我有多个包含表单的 li。

在表单中，我在下拉菜单中选择了几个选项。

我想创建一个 jquery 脚本，这样如果您单击提交并且选择已从默认(选定)选项更改，则隐藏 li。 li 具有唯一的 ID。

示例代码:

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

我想在这里实现什么..

// 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();
        };
     });
});

我也试过了..

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

Answer 1

Working Fiddle .

您不必使用 php 代码生成 js 代码，您可以为所有 li 创建一个全局事件:

$("[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();
});

希望这对您有所帮助。

$("[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>