Question

我有一个样式选择下拉菜单，我创建了自己的.css和.js。当我在页面中只使用一个下拉菜单时，会发生这种情况，按预期正常工作：

相反，当我使用两个下拉菜单时，这是一个混乱，这是正常的，因为我的.js文件将对页面上存在的所有下拉菜单执行此功能。当我使用具有相同.js和.css文件的两个下拉菜单时，就会出现这种情况：

现在我的问题是如何将多个下拉列表用于.js和.css个文件，这些文件都按预期运行？

 
 $(function () {
     $('.styled-select select').hide();
     
     $("select#elem").val('2'); 
     $('.styled-select div').html($('.styled-select select option:selected').text());
     
     $('.styled-select div').click(function () {
         $('.styled-select select').show();
         $('.styled-select select').attr('size', 5);
         $('.styled-select select').focus();
     });

     $('.styled-select select').click(function () {
         $('.styled-select div').html($('.styled-select select option:selected').text());
         $('.styled-select select').hide();
     });
     $('.styled-select select').focusout(function () {
         $('.styled-select select').hide();
     });

 });

    .styled-select select {
        position: absolute;
        background: transparent;
        width: 420px;
        padding-top: 5px;
        font-size: 18px;
        font-family: 'PT Sans', sans-serif;
        color: black;
        border: 0;
        border-radius: 4;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        z-index: 1;
        outline: none;
        left: -7px;
    }
    .styled-select {
        background: url('../img/campaignSelector.png') no-repeat right;
        background-color: white;
        width: 420px;
        height: 42px;
        position: relative;
        margin: 0 auto;
        box-shadow: 0 2px 2px 0 #C2C2C2;
        background-position: 97% 50%;
    }
    .styled-select option {
        font-size: 18px;
        background-color: white;
        margin-left: 3px;
    }
    ::-webkit-scrollbar { 
        display: none; 
    }

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
        <div class="styled-select" style="left:-250px; top:90px; width:200px;">
            <div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
            <select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
                <option value="0">Marco P</option>
                <option value="1">Marco F</option>
                <option value="2">Daniele</option>
                <option value="3">Cristina</option>
                <option value="4">Angine</option>
            </select>
        </div>
        <div class="styled-select" style=" width:200px; left:50px; top:48px;">
            <div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
            <select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
                <option value="0">ReshaD</option>
                <option value="1">Rasheed</option>
                <option value="2">Reza</option>
                <option value="3">Davin</option>
                <option value="4">Ariya</option>
            </select>
        </div> 

    </div>

Answer 1

要使代码适用于.styled-select容器的多个实例，您需要使用$(this)引用引发事件的元素，然后使用closest()获取最近的父代.style-select。从那里，您可以使用find()来获取所需的元素。试试这个：

$('.styled-select select').hide();
$("select#elem").val('2');

$('.styled-select div').each(function() {
    var $container = $(this).closest('.styled-select');
    $(this).html($container.find('select option:selected').text());
});

$('.styled-select div').click(function() {
    var $container = $(this).closest('.styled-select');
    $container.find('select').show().attr('size', 5).focus();
});

$('.styled-select select').click(function() {
    var $container = $(this).closest('.styled-select');
    var text = $container.find('select option:selected').text();
    $container.find('div').html(text);
    $container.find('select').hide();
});

$('.styled-select select').focusout(function() {
    var $container = $(this).closest('.styled-select');
    $container.find('select').hide();
});

Updated fiddle

为多个组件使用唯一的javaScript和CSS

1 个答案: