如何在Javascript中获取data-tagger属性中的选定值?

时间:2017-11-18 00:39:23

标签: javascript jquery

我有一个下拉列表字段,名为" 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="[{&quot;label&quot;:&quot;-&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Software&quot;,&quot;value&quot;:&quot;software&quot;},{&quot;label&quot;:&quot;Hardware&quot;,&quot;value&quot;:&quot;hardware&quot;},{&quot;label&quot;:&quot;Tools&quot;,&quot;value&quot;:&quot;bug_tools&quot;},{&quot;label&quot;:&quot;Documentation&quot;,&quot;value&quot;:&quot;bug_documentation&quot;}]" />


        <p>Which type of bugs do you want to report?</p>

    </div>

data-tagger属性包括选择值:

data-tagger="[{&quot;label&quot;:&quot;-&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Software&quot;,&quot;value&quot;:&quot;software&quot;},{&quot;label&quot;:&quot;Hardware&quot;,&quot;value&quot;:&quot;hardware&quot;},{&quot;label&quot;:&quot;Tools&quot;,&quot;value&quot;:&quot;bug_tools&quot;},{&quot;label&quot;:&quot;Documentation&quot;,&quot;value&quot;:&quot;bug_documentation&quot;}]"

我想根据错误类别字段的不同选择更改表单。如何在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>

2 个答案:

答案 0 :(得分:2)

使用.data()获取data代码

的值
alert($(this).data('tagger'));

<强>更新

如果我理解正确的问题,你想要的应该是这样的

&#13;
&#13;
// 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="[{&quot;label&quot;:&quot;-&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Software&quot;,&quot;value&quot;:&quot;software&quot;},{&quot;label&quot;:&quot;Hardware&quot;,&quot;value&quot;:&quot;hardware&quot;},{&quot;label&quot;:&quot;Tools&quot;,&quot;value&quot;:&quot;bug_tools&quot;},{&quot;label&quot;:&quot;Documentation&quot;,&quot;value&quot;:&quot;bug_documentation&quot;}]" />

    <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;
&#13;
&#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="[{&quot;label&quot;:&quot;-&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Software&quot;,&quot;value&quot;:&quot;software&quot;},{&quot;label&quot;:&quot;Hardware&quot;,&quot;value&quot;:&quot;hardware&quot;},{&quot;label&quot;:&quot;Tools&quot;,&quot;value&quot;:&quot;bug_tools&quot;},{&quot;label&quot;:&quot;Documentation&quot;,&quot;value&quot;:&quot;bug_documentation&quot;}]" />

关于您的示例代码。

var bug_category = $('input#request_custom_fields_25376063').parent();

因为输入字段的.parent()div上没有change事件,所以无法触发。

$(this).find(':selected').data('tagger')

如果以某种方式启动此代码,根据您的示例,find将返回 Zero 元素,因为没有支持:selected的元素,因此.data()将始终返回未定义。