javascript - 使用下拉菜单为带 knockout 的变量赋值

Question

我的目标是使用 if 语句从我的代码中的另一个变量中获取值。

HTML

<div id="countryContainer">
    <div class="label">
        Country:
    </div>
    <select id="countryDropDown"
        data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry">
    </select>
</div>

Javascript

var mxLocations = [
 {title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
 {title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
 {title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
 {title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
  {title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
  {title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
  {title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];

var home = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];

var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""

function getData(dropdown) {
    var value = dropdown.options[dropdown.selectedIndex].value;
    alert(this.value);
}

// Knockout Constructor
var Country = function(name) {
        this.countryName = ko.observable(name);
    };

    var viewModel = {
        availableCountries : ko.observableArray([
            new Country("All Locations"),
            new Country("Home"),
            new Country("Mexico"),
            new Country("USA")
        ]),
        selectedCountry : ko.observable() // Nothing selected by default
    };

ko.applyBindings(viewModel);

这就是我想要完成的，如果从下拉菜单中选择了一个值，我想将一个变量的值赋予另一个变量

function locations() {
    if (dropDownValue == "All Locations") {
        var locations = allLocations;
    } else if (dropDownValue == "Home") {
        var locations = home;
    } else if (dropDownValue == "Mexico") {
        var locations = mxLocations;
    } else if (dropDownValue == "USA") {
        var locations = usLocations;

我一直在寻找所有的地方来完成这个没有结果我希望你能向我指出正确的方向

Answer 1

您可以 subscribe到 selectedCountry 可观察对象。每次 selectedCountry 更改时，都会调用作为参数传递给 subscribe 的回调函数。

这是一个工作片段:

var mxLocations = [
 {title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
 {title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
 {title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
 {title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
  {title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
  {title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
  {title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];

var home = [
  {title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];

var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""

var Country = function(name) {
  this.countryName = ko.observable(name);
};

var viewModel = {
  availableCountries: ko.observableArray([
    new Country("All Locations"),
    new Country("Home"),
    new Country("Mexico"),
    new Country("USA")
  ]),
  selectedCountry: ko.observable()
};

viewModel.selectedCountry.subscribe(function(selectedValue) {
  if (selectedValue.countryName() == "All Locations") {
    locations = allLocations;
  } else if (selectedValue.countryName() == "Home") {
    locations = home;
  } else if (selectedValue.countryName() == "Mexico") {
    locations = mxLocations;
  } else if (selectedValue.countryName() == "USA") {
    locations = usLocations;
  }
  console.log(locations);
});

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="label">
  Country:
</div>
<select id="countryDropDown" data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry">
</select>

点击 Run code snippet 进行测试。