Issue in using modal

Question

I am trying to get value chosen in modal target div but i cant get it

<a href="#" id="invoker" data-target="#options" data-toggle="modal" data-bind="value:selectedValue"></a>

div contains id options.

<div class="modal hide" id="options" tabindex="-1" role="dialog" aria-labelledby="violation-modal" aria-hidden="true">
<select id="cars" name="cars" data-bind="options:cars,optionsValue : id,optionsText : name,value : carName"></select>
</div>

When i use the above select tag and its contents, i can get the selected values in viewmodel.But i tried to get the selected values in div(having id as options) from a(id="invoker") tag,i cant get it(ie by using modals).

Someone please help me.

See this fiddle

Here is the outcome i need. chosen value in select tag to be stored in selectedValue in 'a' tag from it is called

Answer 1

According to your select binding, you store the value in carName observable.

you can use it the way you want in your a tag binding.

Here's a simple example using your Fiddle :

<a href="#" data-target="#options" data-toggle="modal" data-bind="text:carName, attr: {selectedValue:carName}"></a>

<div class="modal hide" id="options" tabindex="-1" role="dialog" aria-labelledby="violation-modal" aria-hidden="true"></div>
<select id="cars" name="cars" data-bind="options:cars,optionsValue : 'id',optionsText : 'name',value : carName"></select>

Updated Fiddle : http://jsfiddle.net/RapTorS/Fp63v/5/

Answer 2

This fiddle should have what you need. Documentation is here and here

<select id="cars" name="cars" data-bind="options: cars, optionsText:'id', optionsvalue:'name', selectedOptions:carName"></select>