質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Knockout.js

KnockoutJSは、Model-ViewView-Model(MVVM)を用いたダイナミックなHTML ULのためのオープンソースのJavaScriptライブラリです。

Q&A

解決済

1回答

2107閲覧

knoockout.jsのoptions: , selectedOptionsについて

totomore

総合スコア47

Knockout.js

KnockoutJSは、Model-ViewView-Model(MVVM)を用いたダイナミックなHTML ULのためのオープンソースのJavaScriptライブラリです。

0グッド

0クリップ

投稿2015/07/05 16:06

お世話になっています。
まだまだ勉強不足ですが、お助けください。

  1. プルダウンの初期選択の仕方

"foreach: items"で取得したデータをhtmlへセットしていますが、プルダウンの場合、取得したデータで初期選択ができません。
具体的には、
selectedOptions: selopt_idで初期選択ができると思っているのですが、
selopt_id: 33 のデータの場合、sel_name: 'PIYO'の'PIYO'を初期選択にしたいと思います。
どのようにすれば実現できますでしょうか?

  1. プルダウンの連動

プルダウン(options: array)で選択したデータを
明細("foreach: items")のプルダウン(options: opt_jyokyoIkkatu)に自動で選択させたいと思います( 'FUGA'を選択した場合、明細も 'FUGA'を選択する)。ただし、明細のチェックボックスにチェックが入っている明細のみです。
どのようにすれば実現できますでしょうか?
Observableがいると思うのですが。。

lang

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script type='text/javascript' src='Scripts/jquery-1.11.3.min.js'></script> 7 <script type='text/javascript' src='Scripts/knockout-3.3.0.js'></script> 8 <script type='text/javascript' src='Scripts/ko_sample5.js' charset="utf-8"></script> 9 10</head> 11<body> 12 (4)sample 13 <select data-bind="options: array, 14 optionsValue: 'sel_id', 15 optionsText: 'sel_name'"></select> 16 <br /> 17 <hr /> 18 19 (1)sample 20 21 <ul data-bind="foreach: items"> 22 <li> 23 <span><input type="checkbox" value="chk_jkyo" data-bind="checked: chked_jkyo" /></span> 24 <span> 25 <select data-bind="options: opt_jyokyoIkkatu, selectedOptions: selopt_id, 26 optionsValue: 'sel_id', 27 optionsText: 'sel_name'"></select> 28 </span> 29 名前:<span data-bind="text: name"></span> 30 年齢:<span data-bind="text: age"></span> 31 <span><textarea name="kanri_comment" rows="2" cols="20"></textarea></span> 32 </li> 33 </ul> 34</body> 35</html> 36 37 38

lang

1 2$(document).ready(function () { 3 4 // (4)sample 5 var vm3 = { 6 array: [{ 7 sel_id: 11, 8 sel_name: 'HOGE' 9 }, { 10 sel_id: 22, 11 sel_name: 'FUGA' 12 }, { 13 sel_id: 33, 14 sel_name: 'PIYO' 15 }] 16 , 17 18 //(1)sample 19 items: [ 20 { 21 chked_jkyo: true, 22 23 opt_jyokyoIkkatu: [{ 24 sel_id: 11, 25 sel_name: 'HOGE' 26 }, { 27 sel_id: 22, 28 sel_name: 'FUGA' 29 }, { 30 sel_id: 33, 31 sel_name: 'PIYO' 32 }] 33 , 34 selopt_id: 33, 35 name: 'taro', 36 age: 16 37 }, 38 { 39 chked_jkyo: true, 40 opt_jyokyoIkkatu: [{ 41 sel_id: 11, 42 sel_name: 'HOGE' 43 }, { 44 sel_id: 22, 45 sel_name: 'FUGA' 46 }, { 47 sel_id: 33, 48 sel_name: 'PIYO' 49 }] 50 , 51 selopt_id: null, 52 name: 'jiro', 53 age: 15 54 }, 55 { 56 chked_jkyo: false, 57 opt_jyokyoIkkatu: [{ 58 sel_id: 11, 59 sel_name: 'HOGE' 60 }, { 61 sel_id: 22, 62 sel_name: 'FUGA' 63 }, { 64 sel_id: 33, 65 sel_name: 'PIYO' 66 }] 67 , 68 selopt_id: 11, 69 name: 'saburo', 70 age: 14 71 } 72 ] 73 }; 74 ko.applyBindings(vm3); 75}); 76 77 78

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

プルダウンの初期選択の仕方については
options:$root.を用いることにより、初期選択が出来るようになりました。
リンク内容

投稿2015/07/10 08:08

totomore

総合スコア47

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問