gpt4 book ai didi

javascript - 仅当从列表中选择一个特定选项时才显示相关内容

转载 作者:行者123 更新时间:2023-11-28 19:20:41 25 4
gpt4 key购买 nike

现在,如果我选择列表中的任何选项,它将显示一个输入字段,但我想更改它,使其仅在选择“其他”时才显示输入字段。

我该怎么做?

$(document).ready(function() {
var viewModel = function() {
var self = this;
self.actions_new_location = ["Studio", "Conservation Studio", "Gallery", "Other"];
self.actions_new_location_selected = ko.observable();
};

ko.applyBindings(new viewModel());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<li class="row">
<div class="col-3">
<label>Location of Photography</label>
</div>
<div class="col-3">
<select data-bind="options: actions_new_location, value: actions_new_location_selected, optionsCaption: 'Choose...'"></select>
</div>
</li>
<!-- to be shown only if "Other" is selected -->
<li class="row" data-bind="visible: actions_new_location_selected">
<div class="col-3 col-offset-3">
<label>Please describe
<input type="text" data-bind="" />
</label>
</div>
</li>

最佳答案

使其成为计算的可观察量,这将更具单元测试性和可重用性。

$(document).ready(function() {
var viewModel = function() {
var self = this;
self.actions_new_location = ["Studio", "Conservation Studio", "Gallery", "Other"];
self.actions_new_location_selected = ko.observable();
self.actions_other_selected = ko.computed(function() {
return self.actions_new_location_selected() === "Other";
});
};

ko.applyBindings(new viewModel());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<li class="row">
<div class="col-3">
<label>Location of Photography</label>
</div>
<div class="col-3">
<select data-bind="options: actions_new_location, value: actions_new_location_selected, optionsCaption: 'Choose...'"></select>
</div>
</li>
<!-- to be shown only if "Other" is selected -->
<li class="row" data-bind="visible: actions_other_selected">
<div class="col-3 col-offset-3">
<label>Please describe
<input type="text" data-bind="" />
</label>
</div>
</li>

关于javascript - 仅当从列表中选择一个特定选项时才显示相关内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28973012/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com