동적으로 옵션 텍스트 변경 - knockout.js

Question

select option의 텍스트 값을 동적으로로드하려고합니다. 빨간색을 클릭하면 텍스트 값은 빨간색이어야하고 파란색을 클릭하면 텍스트 값은 파란색이어야합니다. knockout.js

<a class="a_red" data-bind="">Red</a> 
<a class="a_blue" data-bind="">Blue</a> 
<select> 
    <option value="25"> 25 Red/Blue </option> load either Red or Blue 
    <option value="50"> 50 Red/Blue </option> 
    <option value="100"> 100 Red/Blue </option> 
    <option value="200"> 200 Red/Blue </option> 
</select> 

Answer 1

사용하여 "레드/블루"토글 각각의 클릭에 따라 변경됩니다 뷰 - 모델에 chosenColor 속성을 추가합니다.

이

var vm = { 
    chosenColor: ko.observable('Red'), 
    chosenValue: ko.observable(), 
    getCaption: function(val) { 
    return val + ' ' + this.chosenColor() 
    } 
}; 

ko.applyBindings(vm); 

HTML :

<a href="javascript:;" class="a_red" data-bind="click: chosenColor.bind($data, 'Red')">Red</a> 
<a href="javascript:;" class="a_blue" data-bind="click: chosenColor.bind($data, 'Blue')">Blue</a> 

<select data-bind="value: chosenValue"> 
    <option value="25" data-bind="text: getCaption(25)"></option> 
    <option value="50" data-bind="text: getCaption(50)"></option> 
    <option value="100" data-bind="text: getCaption(100)"></option> 
    <option value="200" data-bind="text: getCaption(200)"></option> 
</select> 

이

---

Fiddle

또한, 참조

JS : 그리고, 사용자 정의 함수를 사용하여 각 <option>의 캡션에 값을 추가 더 나은 녹아웃 지향 접근 방식은 다음과 같습니다 :

var qtys = [25,50,100,200]; 

function viewModel() { 
    var self = this; 

    this.chosenColor = ko.observable('Red'); 
    this.chosenValue = ko.observable(); 
    this.generateOptions = function(vm) { 
    return qtys.map(function(q) { 
     return { value: q, 
       caption: q + ' ' + self.chosenColor() }; 
    }) 
    } 
}; 

ko.applyBindings(new viewModel()); 

그리고

<a href="javascript:;" class="a_red" data-bind="click: chosenColor.bind($data, 'Red')">Red</a> 
<a href="javascript:;" class="a_blue" data-bind="click: chosenColor.bind($data, 'Blue')">Blue</a> 

<select data-bind="value: chosenValue, 
        options: generateOptions(), 
        optionsValue: 'value', 
        optionsText: 'caption'"> 
</select> 

참조 Fiddle

당신은 단순히 방법 text()를 호출 JQuery를 사용하여이 작업을 수행 할 수 있습니다

Answer 2

때 다음과 같은 링크를 사용자가 클릭 :

$(".a_red").click(function(){ 
 
    $("option").text("red"); 
 
}); 
 

 
$(".a_blue").click(function(){ 
 
    $("option").text("blue"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="a_red">Red</a> 
 
<a href="#" class="a_blue">Blue</a> 
 
<select> 
 
    <option value="25"> 25 Red/Blue </option> 
 
    <option value="50"> 50 Red/Blue </option> 
 
    <option value="100"> 100 Red/Blue </option> 
 
    <option value="200"> 200 Red/Blue </option> 
 
</select>

안녕하세요, 안녕하세요.