如何使用带有KnockoutJS的单选按钮动态填充select元素的值

我要创建的是一个select元素，其值由一对单选按钮（“父项”）中的选择确定：

有多少维度？
二维
三维



哪种几何？

我的viewmodel现在是：

<script type="text/javascript">
function viewModel(){
    dimSelect = ko.observable();
    if (dimSelect() == '2D') {
        alert('2D: ' + dimSelect());
        geometrie = ko.observableArray(['Circle', 'Quadrant', 'Triangle']);
    } else {
        alert('3D: ' + dimSelect());
        geometrie = ko.observableArray(['Cilinder', 'Cube', 'Widge']);
    };
}
ko.applyBindings(new viewModel());
</script>

函数viewModel（）{
dimSelect=ko.observable（）；
如果（dimSelect（）=“2D”）{
警报（'2D:'+dimSelect（））；
几何=ko.observearray（[‘圆’、‘象限’、‘三角形’]）；
}否则{
警报（'3D:'+dimSelect（））；
几何=ko.observearray（['Cilinder'，'Cube'，'Widge']）；
};
}
应用绑定（新的viewModel（））；

但由于某些原因，我可以在文本绑定器中获得dimSelect值，但在viewModel中的if语句中无法获得。它未定义（因此3D适用）。 我可能做错了一些新手的事情，比如整个理论方法，所以请尽量让你的答案实用/易懂

---

谢谢你的时间和耐心

有几种方法可以解决这个问题

在当前代码中，您正在构造函数中创建一些全局变量，而不是将它们附加到正在创建的对象的新实例（

this

）

下面是另一种方法：

<p>
How many dimensions? 
<input type="radio" name="dimension" value="2D" data-bind="checked: dimSelect" />2D
<input type="radio" name="dimension" value="3D" data-bind="checked: dimSelect" />3D
</p>
<p data-bind="text: dimSelect"></p>
<p data-bind="with: dimSelect">
    Which geometry? <select data-bind="options: $root.dimensions[$data], optionsCaption: 'Choose'"></select>
</p>

---

示例：

谢谢您的回复，它很有效，所以这太棒了！非常感谢。但如果你知道我的第二个选择元素也是维度单选按钮的可靠元素，也许你的回答会有所不同：

2D->Surface，permiture；3D->Surface，Volume

因为您使用了多元化系统（例如dimension->dimensions[$data]），所以我不能使用同一个解决方案两次（对吗？）可能是另一种可能性？如果我理解正确，然后，我将转到如下内容：

2D

和

3D

属性具有用于各种选项的子属性。此外，如何使用这种方式访问foreach绑定中的相同数组

data bind=“foreach:$root.dimensions[$data].geometry”

似乎不起作用（错误：$root.dimensions[$data]未定义）。如果我不得不猜测一下，我会说您的问题是您试图使用块级元素（作为

p

标记内部的

foreach

的一部分。浏览器会将元素移到

p

之外，并且在您的示例中，KO会在尝试将其与错误上下文绑定时出错。请将

p

更改为

div

，然后试一试。后续问题：

<p>
How many dimensions? 
<input type="radio" name="dimension" value="2D" data-bind="checked: dimSelect" />2D
<input type="radio" name="dimension" value="3D" data-bind="checked: dimSelect" />3D
</p>
<p data-bind="text: dimSelect"></p>
<p data-bind="with: dimSelect">
    Which geometry? <select data-bind="options: $root.dimensions[$data], optionsCaption: 'Choose'"></select>
</p>

function ViewModel() {
    this.dimSelect = ko.observable();
    this.dimensions = {
        '2D': ['Circle', 'Quadrant', 'Triangle'],
        '3D': ['Cilinder', 'Cube', 'Widge']         
    };
}
ko.applyBindings(new ViewModel());