How to update input element using selected value from bootstrap dropdown - asp.net-mvc

Question

I would like to use knockout for updating dynamically the input element by the selected value from the dropdown but I don't understand how to use the code I commented here bellow with the dropdown and I'm not sure if it's the right way to do... Please help me understand and fix this problem.
View:
<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>
Knockout:
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

You can add an observable to select the relationTypeId like
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);
};
}
and change your html markup as
<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>
You should be able to see the selection you make in the input field.