我有一个下拉列表字段,名为" Bug类别"其中包括四个选项: 软件,硬件,工具,文档。 我的HTML:
<div class="form-field string required request_custom_fields_25376063" >
<label for="request_custom_fields_25376063">Bug Category</label>
<input type="hidden" name="request[custom_fields][25376063]" id="request_custom_fields_25376063" autocomplete="off" data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]" />
<p>Which type of bugs do you want to report?</p>
</div>
data-tagger属性包括选择值:
data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]"
我想根据错误类别字段的不同选择更改表单。如何在data-tagger属性中获取所选选项的值?
我的Javascript代码:
alert("value is:"+ $(this).attr('data-tagger').val()); // doesn't work
alert("value is:"+ $(this).attr('data-tagger')); //shows "Undefined" when I select option
编辑:
var bug_category = $('input#request_custom_fields_25376063').parent();
bug_category.on('change',function(){
alert("value is:"+ $(this).find(':selected').data('tagger')); // return null
});
更多脚本代码:
25375983 - 每种数字代表表格中的一个字段。
此代码是从应用程序生成的,它允许我根据&#34; bug_category&#34;的不同选择显示不同的字段。字段。
<script>var cfaRules = [
{"fieldType":"tagger","field":25376063,"value":"bug_documentation","select":[25375983,24342549,24399485,25376023,25454706,25454746,25454766,25454806,25454826,25375963],"formId":240243,"requireds":[25375963,25454706,25454766]},{"fieldType":"tagger","field":25376063,"value":"bug_tools","select":[25454746,25454766,25454806,25454826,25454706,25376023,25375983,25375963,24399485,24342549],"formId":240243,"requireds":[25375983,25454706,25454746,25454766]},{"fieldType":"tagger","field":25376063,"value":"hardware","select":[24342549,24399485,25375963,25375983,25376023,25454706,25454746,25454766,25454806,25454826],"formId":240243,"requireds":[24342549,24399485,25454706,25454766]},{"fieldType":"tagger","field":25376063,"value":"software","select":[25454706,24342549,24399485,25375963,25375983,25376023,25454746,25454806,25454766,25454826],"formId":240243,"requireds":[24399485,25376023,25454706,25454766,25454826]}]</script>
答案 0 :(得分:2)
使用.data()获取data
代码
alert($(this).data('tagger'));
<强>更新强>
如果我理解正确的问题,你想要的应该是这样的
// Get the categories on div's hidden input using .data()
var categories = $('div').find('input').data('tagger');
// Append each categories to the select tag
// e.g. <option value="value> label </option>
$.each(categories, function(key,value){
$('#select_bug').append('<option value="' + value.value + '">' + value.label + '</option>');
});
// declare select tag to bug_category variable
var bug_category = $('#select_bug');
// Alert the value when selected option is changed
bug_category.on('change',function(){
alert("value is : " + $(this).find(':selected').val());
});
&#13;
<div class="form-field string required request_custom_fields_25376063" >
<label for="request_custom_fields_25376063">Bug Category</label>
<input
type="hidden"
name="request[custom_fields][25376063]"
id="request_custom_fields_25376063"
autocomplete="off"
data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]" />
<p>Which type of bugs do you want to report?</p>
<!-- Add select tags to insert dropdown options -->
<select id="select_bug">
</select>
<!-- or if you already have this select tag, use yours -->
<input type="submit" value="Submit">
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
&#13;
答案 1 :(得分:0)
使用jquery's .data()方法,因为它还会自动将值解析为正确的类型。
var value = $('input').data('tagger');
console.log(typeof value);
console.log(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden"
name="request[custom_fields][25376063]"
id="request_custom_fields_25376063"
autocomplete="off"
data-tagger="[{"label":"-","value":""},{"label":"Software","value":"software"},{"label":"Hardware","value":"hardware"},{"label":"Tools","value":"bug_tools"},{"label":"Documentation","value":"bug_documentation"}]" />
关于您的示例代码。
var bug_category = $('input#request_custom_fields_25376063').parent();
因为输入字段的.parent()
,div
上没有change
事件,所以无法触发。
$(this).find(':selected').data('tagger')
如果以某种方式启动此代码,根据您的示例,find将返回 Zero 元素,因为没有支持:selected
的元素,因此.data()
将始终返回未定义。