如何使用 bootstrap 下拉列表中的选定值更新输入元素

Question

我想使用 knockout 通过从下拉列表中选择的值动态更新输入元素，但我不明白如何使用我在这里评论的代码和下拉列表，我不确定它是否是正确的做法...请帮助我理解并解决这个问题。

查看：

<div class="form-group">
    <label for="dropDownRelationType">Business relation type</label>
    <div class="input-group">
        <input type="text" class="form-control" id="txtRelationTypeId" name="txtRelationTypeId" data-bind="value: companyModel.relationTypeId" placeholder="Business relation type"
        <div class="input-group-btn">
            <button type="button" id="dropDownRelationType" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" data-bind="foreach: relationTypes">
                <li><a role="menuitem" href="#" data-bind="text: relationTypeId"></a></li>
                  </ul>
            </div>
      </div>
</div>

淘汰赛：

function companyModel() {
    var self = this;
    self.companyName = ko.observable("");
    self.status = ko.observable("1");
    self.relationTypeId = ko.observable("");
    self.relationTypes = ko.observableArray();
}

function CompanyViewModel() {
    var self = this;
    self.companyModel = new companyModel();
    self.relationTypes = ko.observableArray([
        { relationTypeId: "1" }, { relationTypeId: "2" }, { relationTypeId: "3" }, { relationTypeId: "4" }
    ])

    //-------------------------------------------------------
    //self.relationTypes.subscribe(function (selectedRelationTypeId) {
    //    shouter.notifySubscribers(selectedRelationTypeId, "valueToPublish");
    //});
    //shouter.subscribe(function (selectedRelationTypeId) {
    //    self.relationTypeId(selectedRelationTypeId);
    //}, self, "valueToPublish");
    //-------------------------------------------------------
}

var companyViewModel = new CompanyViewModel();
$(function () {
    ko.applyBindings(companyViewModel);
});

Answer 1

您可以向select relationTypeId 添加一个可观察对象，例如

function CompanyViewModel() {
    var self = this;
    self.companyModel = new companyModel();
    self.selectedRelationTypeId = ko.observable();
    self.relationTypes = ko.observableArray([
        { relationTypeId: "1" }, { relationTypeId: "2" }, { relationTypeId: "3" }, { relationTypeId: "4" }
    ])

    self.selectRelationTypeId = function(relationType){
        self.selectedRelationTypeId(relationType.relationTypeId);
    };
}

并将您的 html 标记更改为

<div class="form-group">
    <label for="dropDownRelationType">Business relation type</label>
    <div class="input-group">
        <input type="text" class="form-control" id="txtRelationTypeId" name="txtRelationTypeId" data-bind="value: selectedRelationTypeId" placeholder="Business relation type" />
        <div class="input-group-btn">
            <button type="button" id="dropDownRelationType" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" data-bind="foreach: relationTypes">
                <li><a role="menuitem" href="#" data-bind="text: relationTypeId, click: $root.selectRelationTypeId"></a></li>
                  </ul>
            </div>
      </div>
</div>

您应该能够在输入字段中看到您创建的select离子。

如何使用 bootstrap 下拉列表中的选定值更新输入元素

How to update input element using selected value from bootstrap dropdown

asp.net-mvc

knockout.js

bootstrap-modal