ドロップダウンメニューを使用してノックアウトの変数に値を割り当てる

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); 

これは、ドロップダウンメニューから値を選択した場合、私は、私は別のvariavleの価値を提供したい、達成したいものです変数

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を観察することができます。 subscribeにパラメータとして渡されたコールバック関数は、毎回selectedCountryが変更されると呼び出されます。それをテストするためにRun code snippet上

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>

クリック：

はここで働いてスニペットです。