드롭 다운 메뉴를 사용하여 녹아웃을 사용하여 변수에 값을 할당

Question

목표는 if 문을 사용하여 코드에서 다른 변수의 값을 제공하는 것입니다.

HTML

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

자바 스크립트

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; 

나는 꿀벌 n 아무런 결과도없이이 일을 성취하기 위해 이곳 저곳을 들여다 보면서 나는 올바른 방향으로 나를 바랄 수 있기를 바란다.

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>

클릭 :

는 다음 작업 조각입니다.