Question

我对jquery有基本的了解，但不知怎的，我无法深入获取元素的数据。

这是我的HTML，这是一个选择框

<form id='form' name="form1" method = 'post'>
    <h2>Change and Update Packages</h2>
  <textarea id="textbox" rows="10" cols="50"></textarea>
  <p>Enter Your Request:</p>
    <input type="text" id="request_input" name="request">
<p>Request Date:</p>
    <input type="date" id="date_input" name="date">
<br>
<br>
<br>
<input id ="submit" type = "button" onclick="display()" value='Add Request'/>
<br>
 <br>
  <input id="clear_button" type="button" name="clearbutton" value="Clear Request" onclick="javascript:eraseText();"> 
</form>

我首先尝试找到所选选项，然后获取包含数据属性的元素 span 。

以下是我目前的代码，我希望得到一个＆＃39; =＆＃39;在变量 string1 中但是这给了我一个未定义的值，请建议

<select id="from_acc">
<option value="1" selected="selected">Apple<span class="cr_info" data-value="1.00000" data-symbol="="></span></option>
<option value="1">Orange<span class="cr_info" data-value="2.00000" data-symbol="*"></span></option>
</select>

Answer 1

根据MDN，option元素只能包含文本。实际上，浏览器似乎剥离了span元素及其内容。

将data-元素放在option元素本身上。

Answer 2

下拉不支持范围或选项中的任何类型的标记，您可以通过检查元素看到它不会显示跨度，您可以通过在attribute option来实现此目的>

$(document).ready(function(){
$("#from_acc").change(function(){ 
        var symbol = $(this).find('option:selected').data('symbol');
        var value = $(this).find('option:selected').data('value'); 
        alert("symbol: "+ symbol +" value: "+ value )
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="from_acc">
<option value="1" selected="selected" data-symbol="=" data-value="1.00000">Apple</option>
<option value="1" data-symbol="*" data-value="2.00000">Orange</option>
</select>

如何获取所选选项中元素的数据？

2 个答案: