Question

我有一个下拉表格，当我选择一个选项时，应该显示带有这些标签的照片。当将选项标签放入div或ul / li元素时，此代码可以正常工作。虽然我知道该功能可以使用这些功能，但是当我将它们用作选择/选项元素时，它将无法使用。

我认为单击功能中存在问题，但无法解决。表单的其他jquery函数也没有提供解决方案。

感谢您的协助。

HTML / PHP

<form>
  <select id="industry_area">Industry:

    <option class="active industry" id="all">All</option>
        <?php
        // check if the repeater field has rows of data

                // loop through the rows of data
            while ( have_rows( 'industry_menu' ) ) :
                the_row();

                // display a sub field value
                        $industry_menu = get_sub_field( 'industry_field_name' );
                        $count = get_row_index();
                        echo "<option class='industry' id=$industry_menu> $industry_menu </option>";

                    endwhile;

        ?>

  </select>
</form>


<div id="parent">
    <?php
    foreach ( $partners as $partner ) {
        $id      = $partner->ID;
        $image   = get_the_post_thumbnail($id);
        $vip = get_field('vip', $id);
        $industry_type = get_field('industry', $id);
        $industry_type_string = $industry_type[0];
        echo
        "<div class='item $vip $industry_type_string'>
            $image
        </div>";
    }
    ?>
</div>

JS

  var $industry = $('.industry').click(function() {
    if (this.id == 'all') {
      $('#parent > div').fadeIn(450);
    } else {
      var $el = $('.' + this.id).fadeIn(450);
      $('#parent > div').not($el).hide();
    }
    $industry.removeClass('active');
    $(this).addClass('active');
    })

照片： screeshot

Answer 1

您不能为<option>标签赋予id属性。他们没有一个。

相反，像给<select>一样给<select id="industry_area">标记一个ID，然后由于没有在<option>标记上设置索引属性，因此必须使用这样的jquery代码来获取所选文字

$( "#industry_area option:selected" ).text();

您对代码进行了修改

var $industry = $('.industry_area ').click(function() {
    if ($( "#industry_area option:selected" ).text() == 'all') {
        $('#parent > div').fadeIn(450);
    } else {
        var $el = $('.' + this.id).fadeIn(450);
        $('#parent > div').not($el).hide();
    }
    $( "#industry_area option:selected" )
        .removeClass('active')
        .addClass('active');
})

使用jQuery选择选项标签

1 个答案: