Question

如果我在black中选择select，那么如何制作，那么src属性将会被读取？我需要改变什么？

$('.select').click(function() {
    var lalala = $(this).val(); 
    $("#gallery .imgsx").css('opacity', '0.5');
    $(".loading").css('opacity', '1');
    $("#gallery .imgsx").on("load", function() {
        $("#gallery .imgsx").css('opacity', '1');
        $(".loading").css('opacity', '0');
    }).attr("src", lalala);
});

<select name="quantity[]" class="quantity small select" id="quantity-select">
    <?php
        if (!$black == '') { echo "<option value='black' src='/image/thumb/Untitled-1.jpg'>Black</option>"; }
        if (!$gray == '') { echo "<option value='gray' src='/image/thumb/Untitled-2.jpg'>Gray</option>"; }
        if (!$silver == '') { echo "<option value='silver' src='/image/thumb/Untitled-3.jpg'>Silver</option>"; }
        if (!$white == '') { echo "<option value='white' src='/image/thumb/Untitled-4.jpg'>White</option>"; }
    ?>
</select>

Answer 1

首先，src不是option元素的有效属性。要在元素中存储自定义数据，请使用data-*属性，如下所示：

<select name="quantity[]" class="quantity small select" id="quantity-select">
    <?php
        if (!$black == '') { echo "<option value='black' data-src='/image/thumb/Untitled-1.jpg'>Black</option>"; }
        if (!$gray == '') { echo "<option value='gray' data-src='/image/thumb/Untitled-2.jpg'>Gray</option>"; }
        if (!$silver == '') { echo "<option value='silver' data-src='/image/thumb/Untitled-3.jpg'>Silver</option>"; }
        if (!$white == '') { echo "<option value='white' data-src='/image/thumb/Untitled-4.jpg'>White</option>"; }
    ?>
</select>

然后在你的JS中你应该挂钩change的{{1}}事件，以便代码适用于那些通过键盘和鼠标导航的人。您还可以使用select选择器和option:selected检索数据属性。您还需要将data()事件附加到load()一次。试试这个：

img

Answer 2

您可以使用option:selected选择器查找所选选项：

$(function() {
  $('.select').change(function() {
    var $this = $(this);
    $('pre').html($this.find('option:selected').attr('src'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="quantity[]" class="quantity small select" id="quantity-select">
    <option value='black' src='/image/thumb/Untitled-1.jpg'>Black</option>
    <option value='gray' src='/image/thumb/Untitled-2.jpg'>Gray</option>
    <option value='silver' src='/image/thumb/Untitled-3.jpg'>Silver</option>
    <option value='white' src='/image/thumb/Untitled-4.jpg'>White</option>
</select>
<pre>
  
</pre>

如何检索选择选项的数据？

2 个答案: