无法检索选项标签属性

Question

因为我想在用户从下拉菜单中选择某些内容时获取companyTitle 。 我已经像下面这样定义了data-description="${companyTitle}" ，如下面我的 Ajax 调用的成功函数的代码所示。

success : function(data) {
                 $.each(data.personnelData.reverse(), function (i) { 
                     
                     let companyId = data.personnelData[i].companyId;
                     let companyTitle = data.personnelData[i].title;
                     let dateOfCreation = moment(data.personnelData[i].createDate).format('MM/DD/YYYY');
                     
                 
                $("#myList").append(`<option data-description="${companyTitle}" value="${companyId}">${companyTitle}|${dateOfCreation}</option>`); 
                                        
                });
               
                
                
         },
     
     

当我在我的 javascript 代码中这样测试它时：

$("select#myList").change(function(){
        
        console.log("Testing companyTitle");
        console.log($('#myList :selected').data('description'));
        
        
     })   

我只在控制台日志中看到以下内容 - Company Set for

我相信这是因为以下几点：

当我在浏览器中检查选项标签时，它显示了以下条目：

<option data-description="Company Set for " abc="" pxy="" psqrty@12:20:49"="" (4="" companies="" on="" 09="" 22="" 2020="" 01:20:53="" pm)"="" value="12345">Company Set for "Abc Pxy Psqrty@12:20:49" (4 companies on 09/22/2020 01:20:53 PM)|09/22/2020</option>

我怎样才能解决这个让里面的$("select#myList").change(function(){我只能检索的双引号中的部分（即Abc Pxy Psqrty@12:20:49以下） companyTitle ：

Company Set for "Abc Pxy Psqrty@12:20:49" (4 companies on 09/22/2020 01:20:53 PM)

Answer 1

如果不是使用字符串连接构建option ，而是使用 jQuery 的对象模型构建它，则描述数据不会因为引号而出现乱码：

 const companyTitle = "Company Set for \\"Abc Pxy Psqrty@12:20:49\\" (4 companies on 09/22/2020 01:20:53 PM)", companyId = 1, dateOfCreation = "01/01/2020"; const $option = $('<option />') .val(companyId) .text(`${companyTitle}|${dateOfCreation}`) .data('description',companyTitle); $('#myList').append($option); $('#myList').on('change', function(){ console.log($(":selected", this).data('description')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="myList"> <option>Select</option> </select>

如果您随后只想提取应该相当简单的引号中的位 - 使用正则表达式或字符串操作。 有很多提取引号之间值的示例。

Answer 2

当data.personnelData[i].title始终相似并且只有一对双引号时，您可以将该字符串拆分为：

 var companyTitle = "Company Set for \\"Abc Pxy Psqrty@12:20:49\\" (4 companies on 09/22/2020 01:20:53 PM)"; var companyTitleDescription = companyTitle.indexOf('"') > -1 ? companyTitle.split("\\"")[1] : companyTitle; console.log(companyTitleDescription);

并将其分配给您的data-description属性。