如何在HTML选择标记中显示默认选项值

Question

我将动态值附加到HTML选择。

我做这种方式

var response = { 
    "companies": [{ 
     "companyID": 2, 
     "companyName": "RAvi Corporation Ltd." 
    }, { 
     "companyID": 3, 
     "companyName": "Kiran Cement Ltd." 
    }, { 
     "companyID": 4, 
     "companyName": "ACC Ltd." 
    }] 
} 

var companies = '<option value="">All Companies</option>'; 
for (var i = 0; i < response.companies.length; i++) { 
    companies += '<option value="' + response.companies[i].companyID + '" selected>' + response.companies[i].companyName + '</option>' 
} 
$("#companieslist").html(companies); 

被显示在HTML选择的最后一个值，则可以显示所有公司的第一个值？

这是我的jsfiddle

https://jsfiddle.net/cf7hnvcq/1/

能否请你让我知道如何做到这一点

Answer 1

设置的select值清空。这会将默认值设置为下拉菜单。

$('#companieslist').val(''); 

Demo

或者，你可以从for环去除option的selected属性。这会将第一个option设置为选中状态。

var response = { 
 
    "companies": [{ 
 
    "companyID": 2, 
 
    "companyName": "RAvi Corporation Ltd." 
 
    }, { 
 
    "companyID": 3, 
 
    "companyName": "Kiran Cement Ltd." 
 
    }, { 
 
    "companyID": 4, 
 
    "companyName": "ACC Ltd." 
 
    }] 
 
}; 
 

 

 
var companies = '<option value="">All Companies</option>'; 
 
for (var i = 0; i < response.companies.length; i++) { 
 
    companies += '<option value="' + response.companies[i].companyID + '">' + response.companies[i].companyName + '</option>'; // Remove selected attribute from here 
 
} 
 
$("#companieslist").html(companies);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div> 
 
    <select id="companieslist" name="companieslist"></select> 
 
</div>

Answer 2

只有你想用默认值，看看应该有selected属性的选项。

线20应该是：

var companies = '<option value="" selected>All Companies</option>'; 

和线22应该是：

companies += '<option value="' + response.companies[i].companyID + '">' + response.companies[i].companyName + '</option>' 

DEMO