Question

您能否看一下这个演示，让我知道为什么我无法在选项更改时获得数据属性data-index？

var selectedLayer;
$('#single-animal-select').on('change', function() {
  selectedLayer = $(this).data('index');
  alert(selectedLayer);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <select id="single-animal-select" name="singleSpecieSelect"  class="selectpicker col-lg-12 col-md-12 col-sm-12 col-xs-12" data-size="10" data-style="btn-custom btn-sm" data-live-search="true"><option class="controlsFont" value="0">Select From The List</option>  
 <option data-index="21" value="sinani-01">Northern Saw-whet Owl</option><option data-index="23" value="sinani-02">Northwestern Salamander</option><option data-index="38" value="sinani-03">Wandering Salamander</option><option data-index="35" value="sinani-04">Coastal Tailed Frog</option><option data-index="19" value="sinani-05">Marbled Murrelet</option><option data-index="5" value="sinani-06">Bulltrout</option><option data-index="10" value="sinani-07">Coastrange Sculpin</option><option data-index="9" value="sinani-08">Coastal Cutthroat Trout</option><option data-index="7" value="sinani-09">Chinook Salmon</option><option data-index="12" value="sinani-10">Common Nighthawk</option><option data-index="8" value="sinani-11">Chum Salmon</option><option data-index="11" value="sinani-12">Coho Salmon</option><option data-index="24" value="sinani-13">Olive-sided Flycatcher</option><option data-index="32" value="sinani-14">Sooty Grouse</option><option data-index="4" value="sinani-15">Bobolink</option><option data-index="13" value="sinani-16">Dolly Varden</option><option data-index="14" value="sinani-17">Horned Lark</option><option data-index="2" value="sinani-18">Barn Swallow</option><option data-index="43" value="sinani-19">Yellow-breasted Chat</option><option data-index="16" value="sinani-20">Kokanee</option><option data-index="27" value="sinani-21">Red Crossbill</option><option data-index="0" value="sinani-22">American Marten</option><option data-index="40" value="sinani-23">Western Screech-owl</option><option data-index="17" value="sinani-24">Lewis's Woodpecker</option><option data-index="36" value="sinani-25">Townsend's Vole</option><option data-index="34" value="sinani-26">Stoat</option><option data-index="18" value="sinani-27">Little Brown Bat</option><option data-index="29" value="sinani-28">Sage Thrasher</option><option data-index="1" value="sinani-29">Band-tailed Pigeon</option><option data-index="25" value="sinani-30">Pink Salmon</option><option data-index="39" value="sinani-31">Western Redback Salamander</option><option data-index="6" value="sinani-32">Chestnut-backed Chickadee</option><option data-index="37" value="sinani-33">Vesper Sparrow</option><option data-index="20" value="sinani-34">Northern Red-legged Frog</option><option data-index="26" value="sinani-35">Rainbow trout</option><option data-index="30" value="sinani-36">Sand Martin</option><option data-index="3" value="sinani-37">Black-throated Gray Warbler</option><option data-index="31" value="sinani-38">Sockeye Salmon</option><option data-index="42" value="sinani-39">Williamson's Sapsucker</option><option data-index="33" value="sinani-40">Steelhead Trout</option><option data-index="28" value="sinani-41">Rough-skinned Newt</option><option data-index="22" value="sinani-42">Northwestern Garter Snake</option><option data-index="15" value="sinani-43">Hutton's Vireo</option><option data-index="41" value="sinani-44">Westslope Cutthroat Trout</option> 
       </select>

Answer 1

因为在change事件this的上下文中引用了select元素，而不是所选的选项。请使用$("option:selected", this)来获取select元素中的selected option element。

＆＃13;

var selectedLayer;
$('#single-animal-select').on('change', function() {
  selectedLayer = $("option:selected", this).data('index');
  alert(selectedLayer);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="single-animal-select" name="singleSpecieSelect" class="selectpicker col-lg-12 col-md-12 col-sm-12 col-xs-12" data-size="10" data-style="btn-custom btn-sm" data-live-search="true">
  <option class="controlsFont" value="0">Select From The List</option>
  <option data-index="21" value="sinani-01">Northern Saw-whet Owl</option>
  <option data-index="23" value="sinani-02">Northwestern Salamander</option>
  <option data-index="38" value="sinani-03">Wandering Salamander</option>
  <option data-index="35" value="sinani-04">Coastal Tailed Frog</option>
  <option data-index="19" value="sinani-05">Marbled Murrelet</option>
  <option data-index="5" value="sinani-06">Bulltrout</option>
  <option data-index="10" value="sinani-07">Coastrange Sculpin</option>
  <option data-index="9" value="sinani-08">Coastal Cutthroat Trout</option>
  <option data-index="7" value="sinani-09">Chinook Salmon</option>
  <option data-index="12" value="sinani-10">Common Nighthawk</option>
  <option data-index="8" value="sinani-11">Chum Salmon</option>
  <option data-index="11" value="sinani-12">Coho Salmon</option>
  <option data-index="24" value="sinani-13">Olive-sided Flycatcher</option>
  <option data-index="32" value="sinani-14">Sooty Grouse</option>
  <option data-index="4" value="sinani-15">Bobolink</option>
  <option data-index="13" value="sinani-16">Dolly Varden</option>
  <option data-index="14" value="sinani-17">Horned Lark</option>
  <option data-index="2" value="sinani-18">Barn Swallow</option>
  <option data-index="43" value="sinani-19">Yellow-breasted Chat</option>
  <option data-index="16" value="sinani-20">Kokanee</option>
  <option data-index="27" value="sinani-21">Red Crossbill</option>
  <option data-index="0" value="sinani-22">American Marten</option>
  <option data-index="40" value="sinani-23">Western Screech-owl</option>
  <option data-index="17" value="sinani-24">Lewis's Woodpecker</option>
  <option data-index="36" value="sinani-25">Townsend's Vole</option>
  <option data-index="34" value="sinani-26">Stoat</option>
  <option data-index="18" value="sinani-27">Little Brown Bat</option>
  <option data-index="29" value="sinani-28">Sage Thrasher</option>
  <option data-index="1" value="sinani-29">Band-tailed Pigeon</option>
  <option data-index="25" value="sinani-30">Pink Salmon</option>
  <option data-index="39" value="sinani-31">Western Redback Salamander</option>
  <option data-index="6" value="sinani-32">Chestnut-backed Chickadee</option>
  <option data-index="37" value="sinani-33">Vesper Sparrow</option>
  <option data-index="20" value="sinani-34">Northern Red-legged Frog</option>
  <option data-index="26" value="sinani-35">Rainbow trout</option>
  <option data-index="30" value="sinani-36">Sand Martin</option>
  <option data-index="3" value="sinani-37">Black-throated Gray Warbler</option>
  <option data-index="31" value="sinani-38">Sockeye Salmon</option>
  <option data-index="42" value="sinani-39">Williamson's Sapsucker</option>
  <option data-index="33" value="sinani-40">Steelhead Trout</option>
  <option data-index="28" value="sinani-41">Rough-skinned Newt</option>
  <option data-index="22" value="sinani-42">Northwestern Garter Snake</option>
  <option data-index="15" value="sinani-43">Hutton's Vireo</option>
  <option data-index="41" value="sinani-44">Westslope Cutthroat Trout</option>
</select>

＆＃13;

从选择选项更改获取数据属性的问题

1 个答案: