如何檢索選擇選項上的數據？

-1

如何做到這一點，如果我在select中選擇black，那麼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>

來源

2016-01-26 Rahayu

的Wooo downvotes，應該有人解釋說OP混合PHP代碼JavaScript代碼裏面沒有任何意義，而不是AJAX查詢應該做 –

@asdf_enel_hak裏面有沒有JavaScript的PHP代碼。除非你使用模板引擎，否則在HTML中使用php並不是最糟糕的事情。但問題本身可能更清楚明確。 – empiric

@empiric我想用php代碼完成選舉 –

您可以使用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>

來源

2016-01-26 09:29:48 jcubic

首先，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事件select使代碼適用於那些誰鍵盤導航以及對鼠標。您還可以使用option:selected選擇器和data()來檢索數據屬性。您也只需要將load()事件附加到img一次。試試這個：

$('.select').change(function() { 
    var value = $(this).val(); 
    var src = $(this).find('option:selected').data('src'); 

    $("#gallery .imgsx").prop('src', src).css('opacity', '0.5'); 
    $(".loading").css('opacity', '1'); 
}); 

$("#gallery .imgsx").on("load", function() { 
    $("#gallery .imgsx").css('opacity', '1'); 
    $(".loading").css('opacity', '0'); 
});

來源

2016-01-26 09:32:51

你是不是指$（'。select'）。change（...）;'而不是'click'？ –

@JoshHarrison是的 - 忘記改變這一點。謝謝。 –

如何檢索選擇選項上的數據？

回答

相關問題