knockout.js - knockoutjs - selected option knockout

Knockout.js-Obtiene el valor seleccionado de texto en un menú desplegable

Question

Me gustaría saber cómo obtener el valor del TEXTO seleccionado en el menú desplegable, solo recuerde que mi menú desplegable tiene los datos fijos y no están ocupados por "ko.observableArray ()". ¿Algunas ideas?

Cuando selecciono una opción quiero tener: Selección de valor y texto.

<p>
    Select a car:
    <select data-bind="value: selectedValue, optionsText:???">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

Mi ko ViewModel:

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable()
};

ko.applyBindings(viewModel);

Ver este violín: JSFiddle

Answer 1

No sé si hay una solución posible con Knockout.js. Te dejo dos posibles soluciones:

Solución 1

Puede usar un poco de Javascript nativo para lograr su objetivo:

viewModel.selectedValue = ko.observable();
viewModel.selectedText = ko.computed(function () {
    var elem = document.querySelector("select option[value=" + viewModel.selectedValue() + "]");
    return elem && elem.innerHTML;
});

Como puede ver, puede tomar el "valor" y usarlo para devolver el elemento DOM que cumpla con sus requisitos. Por supuesto, puede reemplazar select con una identificación, si la necesita.

Mira este violín para verlo funcionar.

Solución 2

La forma más sencilla de hacer esto es tener una matriz con todos los elementos que se poblarán:

var cars = [{ id: ''volvo'', name: ''Volvo'' }, { id: ''saab'', name: ''Saab'' }, { id: ''mercedes'', name: ''Mercedes'' }, { id: ''audi'', name: ''Audi'' }];

Después de eso, depende de lo que necesite cuando diga " value ", recuerde que está vinculando un objeto, no una lista de clave / valor:

HTML:

<select data-bind="options: cars, value: selectedCar, optionsText: ''name''"></select>

Y tu JS:

selectedCar = ko.observable();
selectedValue = ko.computed(function () { 
    return selectedCar() && selectedCar().id; 
});
selectedText =  ko.computed(function () { 
    return selectedCar() && selectedCar().name; 
});

De esta forma tendrá por separado su "valor" y su "texto" (mejor denominados id y propiedades de name ) en dos observables calculados.

Ver el violín trabajando .

Answer 2

Acabo de tener que lograr esto y he agregado una función ko.computed para recuperar el texto seleccionado de las opciones de la siguiente manera:

// assume that options has been populated with Key / Value pairs
self.options = ko.observableArray([]);

self.selectedType = ko.observable(null);
self.selectedTypeText = ko.observable(null);
self.selectedType.subscribe(function (newValue) {
    if (newValue) {
        self.checkAccess(newValue);

        $.each(self.options(), function (i, item) {
            if (item.Key === newValue) {
                self.selectedTypeText(item.Value);
            }
        });
    }
});

Answer 3

Tienes que trabajar con opciones vinculantes para esto. Y como dice Jeff , no malgastes.

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable(),
    carOptions : [''Volvo'',''Saab'', ''Mercedes'', ''Audi'']
};

ko.applyBindings(viewModel);

Margen:

<p>
    Selecte a car:
    <select data-bind="value: selectedValue, options: carOptions">

    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

Esta es la forma más sencilla de hacerlo. Para escenarios más complicados, visite los documentos .

JsFiddle 1 , JsFiddle 2