HTML Select 字段默認不選擇第一個值

Question

我正在使用 angular js 和 HTML 創建一些基本網站，並且由於某種原因我有一個包含 3 個選項的下拉菜單，默認情況下未選擇選項字段中的第一個值。 瀏覽器上的 HTML 頁面顯示空白選項（即使我的 select 列表中沒有空白選項）；

HTML 在瀏覽器上：

HTML 代碼：

<div class="col-md-4">
    <select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
        <option class="dropdown-item" value="ordinaryevent">Ordinary Event</option>
        <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
    </select>
</div>

我的要求是在頁面加載的字段中選擇第一個選項Ordinary Event 。 我嘗試了selected的選項，但仍然沒有運氣。 在頁面加載的幾分之一秒內，該字段顯示值Ordinary Event ，但隨后消失。 我並沒有試圖將它隱藏在 angular 或其他不確定原因中。

我也嘗試過以下但沒有運氣：

<div class="col-md-4">
<select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
    <option class="dropdown-item" value="ordinaryevent" selected>Ordinary Event</option>
    <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
</select>

我嘗試將以下命令添加到我的 angular：

$scope.formAdata.eventtype2 = 'ordinaryevent';

但是由於某種原因添加此命令后，我從 node.js 填充的其他下拉列表變得混亂：

<div class="row">
<div class="col-md-12 form-group">
    <label for="eventtype1" class="col-md-3 control-label">Event Type</label>
    <div class="col-md-4">
        <select id="eventtype1" ng-model="formAdata.eventtype1" class="form-control" ng-options='eventtype1 for eventtype1 in eventType'>
            <option class="dropdown-item" value="" disabled selected>Select Event Type</option>
            <option class="dropdown-item" value="{{eventtype1}}"> {{ eventtype1 }} </option>
        </select>
    </div>
    <div class="col-md-4">
        <select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
            <option class="dropdown-item" value="ordinaryevent" selected>Ordinary Event</option>
            <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
        </select>
    </div>
</div>

    app.controller('AppController', function($scope, $http) {
    $scope.formAdata.eventtype2 = 'ordinaryevent';

    $scope.createEvents =   function(){
        $http({
            url: "/createEvents",
            method: "POST",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $.param($scope.formAdata)
        }).success(function(response) {
            $scope.xmldata  =   response[0].XML;
            $scope.jsondata =   JSON.stringify(JSON.parse(response[1].JSON), undefined, 4);
        }).error(function(error) {
            console.log(error)
        });
    }

    $scope.init = function () {
        $http({
            url: "/populateFields",
            method: "GET"
        }).success(function(response) {
            $scope.businessSteps    =   response.businessStep;
            $scope.eventType        =   response.eventType; 
        }).error(function(error) {
            console.log(error);
        });
    };
});

Answer 1

您可以將 controller 中formAdata.eventtype2 model 的默認值設置為您想要的默認值

例如

你可以在你的 controller

$scope.formAdata.eventtype2 = 'ordinaryevent';

或您對第一個選項的任何價值

---

對於第二個問題，試試這個

<div class="col-md-4" ng-if="eventType">
    <select id="eventtype1" ng-model="formAdata.eventtype1" class="form-control" ng-options='eventtype1 for eventtype1 in eventType'>
        <option class="dropdown-item" value="" disabled selected>Select Event Type</option>
        <option class="dropdown-item" value="{{eventtype1}}"> {{ eventtype1 }} </option>
    </select>
</div>

app.controller('AppController', function($scope, $http) {
$scope.formAdata = {
    eventtype1: '',
    eventtype2: 'ordinaryevent',
};

$scope.createEvents =   function(){
    $http({
        url: "/createEvents",
        method: "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param($scope.formAdata)
    }).success(function(response) {
        $scope.xmldata  =   response[0].XML;
        $scope.jsondata =   JSON.stringify(JSON.parse(response[1].JSON), undefined, 4);
    }).error(function(error) {
        console.log(error)
    });
}

$scope.init = function () {
    $http({
        url: "/populateFields",
        method: "GET"
    }).success(function(response) {
        $scope.businessSteps    =   response.businessStep;
        $scope.eventType        =   response.eventType; 
    }).error(function(error) {
        console.log(error);
    });
};

$scope.init();

Answer 2

您必須在默認選項中添加“選定”

<option value="xx" selected>...

Answer 3

使用選定屬性

 <div class="col-md-4"> <select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control"> <option class="dropdown-item" selected value="ordinaryevent">Ordinary Event</option> <option class="dropdown-item" value="errordeclaration"> Error Declaration </option> </select> </div>