使用 jquery 访问数据列表选项的标签文本

Question

我正在使用来自 Json 的数据填充 html 中的数据列表。这些选项被附加到带有值和标签 text 的数据列表中。单击选项时，我希望将值和文本插入到表单文本字段中。

可以访问选项的值并成功插入到文本字段中。但我无法访问插入选项的标签。

我尝试过使用 $(this).innerhtml(); , $(this).text(); , $(this).label(); , $(this).innerhtml();等等..

所有这些结果都返回空值（未定义）而不是所需的字符串。

$(document).ready(function ()
{
    $.ajax({
        type: 'POST',
        url: '@Url.Action("MyJsonFunction")',
        datatype: 'json',
            success: function (data) {                    
                $.each(data, function (index, data) { $("#myid1").append("<option value='"+data.Value+"'label='"+data.Text+"'></option > ");})},
        error: function () 
        {
            alert("Something went wrong!");}});

     $("#myid2").change(function () 
      {

         var s = $(this).val();
         var d = $(this).html();

         alert(d);

         $("#input1").val(s);
          $("#input2").val(d);
     });

});

选项的值被插入到输入文本字段，但当我尝试访问它时选项的标签为空。

当我提醒它时，它会显示一个空字符串或“未定义”。

Answer 1

$('body').on('change','#myid1',function(){ alert( $(this).find(':selected').attr('label') ) });

请尝试此代码。我相信这会奏效

Answer 2

试试这个解决方案。你必须选择任何一个选项，因为在表单加载时，你的选项都没有被选中，它肯定会警告为未定义。

$(document).ready(function ()
{
$("#colors").trigger('change');
});
$("#colors").change(function ()       {
  var d = $('#colors').find("option:selected").val();
  alert(d);
  $('#selvalue').val(d);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<label for="color">Favorite Color</label>
<input list="colors" name="color"> 

<datalist id="colors"> 
<option selected=selected value="Green"> 
<option value="Red"> 
<option value="Blue">
<option value="Yellow"> 
<option value="Orange"> 
</datalist>




<input type='text' id='selvalue' placeholder='Display seleted value'/>