禁用模式时如何更改状态类型下拉列表的外观答案

【问题标题】：How to change appearance of the state type drop down when disabled mode禁用模式时如何更改状态类型下拉列表的外观
【发布时间】：2015-12-03 15:56:24
【问题描述】：

我们有两个下拉菜单。基于第一个下拉事件发生变化，第二个下拉值正在被填充。

如何更改第二种下拉菜单的外观，使其在启用和禁用状态下都不同？

在这两个下拉列表中，它们看起来都已启用，但在我们选择国家之前，这些州没有以任何方式加载。select CSS 在 IE 中表现得像例外，但在 Chrome 中却没有。它看起来在 Chrome 中已启用。

//****************//

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

When I removed the Color inherit from boot strap It makes the difference.How to override the style sheet which effecs the color to the state dropdown in the customized CSS

<div class="item1" id="countries">
    <div class="selectbox">
        <select data-bind="options: Countries, 
        optionsText: $data, 
        optionsValue: $data, 
        value: SelectedCountry, 
        event: { change: $parent.CountryActionChanged }">
        </select>
    </div>
</div>
<div class="item2" id="states">
    <div class="selectbox">
        <select data-bind="options: States, 
        optionsText: 'Name', 
        optionsValue: 'Id',
        value: SelectedStateType, 
        event: { change: $parent.StateActionChanged },
        enable: $parent.IsStateType"
        >
        </select>
    </div>
</div>

【问题讨论】：

这对我来说看起来不像是一个淘汰赛的问题。只需使用 CSS 设置样式？

标签： html css dropdownbox

【解决方案1】：

您尚未提供完整的复制品。当我试图剔除你遗漏的东西时，我遇到了各种问题。所以我决定告诉你如何做一些稍微不同的事情，以一种也解决enable绑定问题的方式。这里是：

var ViewModel = function() {
  var self = this;
  
  self.countries = [
    { name: "US", states: ["NY", "CA", "etc"] },
    { name: "Monaco", states: [] },
    { name: "Vatican", states: [] }
    // etc
  ];
  
  self.selectedCountry = ko.observable();
  self.selectedState = ko.observable();  
  
  self.availableStates = ko.computed(function() {
    if (!!self.selectedCountry()) {
      return self.selectedCountry().states;
    }
    return [];
  });
  
  self.selectedCountryHasStates = ko.computed(function() {
    return self.availableStates().length > 0;
  });
};

ko.applyBindings(new ViewModel());

select { min-width: 15em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="item1" id="countries">
    <div class="selectbox">
        <select data-bind="
            options: countries, 
            optionsText: 'name',
            value: selectedCountry">
        </select>
    </div>
</div>
<div class="item2" id="states">
    <div class="selectbox">
        <select data-bind="
            options: availableStates, 
            value: selectedState, 
            enable: selectedCountryHasStates">
        </select>
    </div>
</div>

注意事项：

不要使用event 绑定，除非你真的，真的必须这样做。相反，请使用 computed 函数，以便您的视图模型根据用户所做的选择动态更改。
（主观）构造函数保留PascalCase，成员和变量使用camelCase。
enable 状态基于是否存在状态。在单独的 computed 中执行此操作，以便您可以对其逻辑进行单元测试。
尝试将下拉菜单绑定到复杂对象（例如countries 本身），这会使您的视图模型使用构造函数/javascript 的面向对象特性，从而使您的代码更具可读性。它还大大减少了您的 data-bind 属性。

【讨论】：