2013-10-24 12 views
6

Sto usando knockoutjs per associare un elenco selezionato. Ecco uno Sample , Voglio ottenere il testo dell'opzione selezionato al posto del valore selezionato.ottiene il testo dell'opzione selezionato in knockout

Come ottenerlo usando knockoutjs?

<select id="projectMenu" name="projectMenu" data-bind=" 
     value: selectedProject, 
     options:  projectFilters, 
     optionsText: 'a', 
     optionsValue: 'b', 
     optionsCaption: '-- Select Project --' 
    "> 
    </select> 
<b>Selected Project:</b> <span data-bind="text: selectedProject"></span> 
+0

si prega di fornire un esempio di codice, non è semplicemente un link. – dokaspar

+1

Possibile duplicato? http://stackoverflow.com/questions/11112435/how-can-i-get-the-text-of-a-selected-item-from-a-knockout-observable –

risposta

1

Per quanto mi riguarda, non è possibile con una semplice rilegatura. Ma si può facilmente creare computedObservable che scelgono optionText basa su OptionValue

vm.selectedOption= ko.computed(function() { 
    for (var i = 0; i < this.projectFilters().length; i += 1) { 
     var data = this.projectFilters()[i]; 
     if (data.a === this.selectedProject()) { 
      return data.b; 
     } 
    } 
    return null; 
}, vm); 
+0

Non posso farlo perché non voglio per iterare una grande collezione, e ho molti selezionare l'elenco nella mia vista. quindi ridurrà le prestazioni. – Sudarshan

+3

@MotaChuha A meno che non ci siano collezioni molto grandi che dovrebbero funzionare bene - i PC moderni sono piuttosto veloci;). E consiglierei di fare test delle prestazioni prima di rifiutare questa soluzione - forse una performance un po 'più lenta sarebbe accettabile. In caso contrario Probabilmente dovresti scrivere un binding knockout personalizzato per raggiungere il requisito. –

+0

ok, ma questa sarà la mia ultima opzione. – Sudarshan

10

Il modo più semplice per farlo è quello di rimuovere il legame optionsValue. Quando non si separa il binding del valore options, l'intero elemento sarà il valore selezionato.

<select id="projectMenu" name="projectMenu" data-bind=" 
     value: selectedProject, 
     options:  projectFilters, 
     optionsText: 'a',   
     optionsCaption: '-- Select Project --' 
    "> 
    </select> 
<b>Selected Project: 
<span data-bind="text: selectedProject() ? selectedProject().a : 'no selection '"></span> 

See fiddle

+0

collegamento violino non funzionante – Sudarshan

+0

Per me funziona. Che tipo di errore ottieni? – Damien

+0

Sta funzionando per l'evento subscribe non per l'evento change.anche come buona soluzione compagno. apprezza il tuo lavoro. Dal modo in cui il violino funziona bene per me. – Prageeth

1
vm.selectedCountryName = ko.computed(function() { 
     var text = ''; 
     ko.utils.arrayForEach(vm.countries(), function (item) { 
      if (item.CountryId == vm.selectedCountry()) { 
       text = item.CountryName; 
       return; 
      } 
     }); 
     return text; 
    }); 
Problemi correlati