Question

我有一个带有组合框的文本框，如下所示。我正在使用datalist实现这一目标：

$(function(){
  Customercategory();
})



 function Customercategory() { 
    $("#ddlCustomercategoryIdList").empty();
        
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=General id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=My Category id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=New Category id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=Last Category id=1></option>');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customercategory" list="ddlCustomercategoryIdList" id="ddlCustomercategoryId" class="form-control" placeholder="--Select Category--"/>
 
<datalist id="ddlCustomercategoryIdList">
</datalist>

如您所见，当值中有空格时，下拉菜单中仅显示第一部分。

仅显示new而不是new category

我该如何纠正？

我正在为此使用动态附加功能。

   // Populating Customercategory Dropdwonlist
    $.ajax({
        type: "POST",
        url: "CustomerMaster.aspx/Getcustomercategory",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            Customercategory(data.d);
        },
        error: function (msg) { }
    });

    function Customercategory(data) {
        $("#ddlCustomercategoryIdList").empty();
        for (var i in data) {
            $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value=' + data[i].customercategory + ' id=' + data[i].companyid + '></option>');
        }

    }

Answer 1

您在value属性中缺少双引号。由于您的append()函数使用单引号将整个HTML引起来，因此您需要对属性使用双引号。您还缺少id的双引号。此外，您的id值是相同的，这是一种不好的做法。

$(function(){
  Customercategory();
})

 function Customercategory() { 
    $("#ddlCustomercategoryIdList").empty();
        
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="General" id="1"></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="My Category" id="1"></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="New Category" id="1"></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="Last Category" id="1"></option>');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customercategory" list="ddlCustomercategoryIdList" id="ddlCustomercategoryId" class="form-control" placeholder="--Select Category--"/>
 
<datalist id="ddlCustomercategoryIdList">
</datalist>

Answer 2

您应该在值之外使用引号（""），当您的值包含空格时必须使用引号。

赞：

value="New Category"

$(function(){
  Customercategory();
})



 function Customercategory() { 
    $("#ddlCustomercategoryIdList").empty();
        
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="General" id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="My Category" id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="New Category" id=1></option>');
        $("#ddlCustomercategoryIdList").append('<option class="CustomercategoryComboName" value="Last Category" id=1></option>');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Customercategory" list="ddlCustomercategoryIdList" id="ddlCustomercategoryId" class="form-control" placeholder="--Select Category--"/>
 
<datalist id="ddlCustomercategoryIdList">
</datalist>

当包含空间的数据列表仅显示第一部分时

2 个答案: