JSでselectプルダウンの状態を取得して、それを文字列で表示させたい

■やりたいこと
以下コードを見ていただきたいのですが、selectで取得した値によって、コメントを変更したいのです。WEBサーバの言語はPHPです
例：メインディッシュの工程１のプルダウンを済に変更
メインディッシュのコメントは『工程１まで済』と表示させたい

<table>
<tr>
  <td>
  メインディッシュ
  </td>
  <td>
　　工程１：野菜を切る
    <select name="status1[0]" class="sts1">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
　　工程２：材料を炒める
    <select name="status2[0]" class="sts2">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
   工程３：器に盛りつける
    <select name="status3[0]" class="sts3">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
    コメント：<input type="text" name="comment[0]" class="cmt">
  </td>
</tr>
<tr>
  <td>
 　副菜1
  </td>
  <td>
　　工程１：野菜を切る
    <select name="status1[1]" class="sts1">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
　　工程２：材料を炒める
    <select name="status2[1]" class="sts2">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
   工程３：器に盛りつける
    <select name="status3[1]" class="sts3">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
    コメント：<input type="text" name="comment[1]" class="cmt">
  </td>
</tr>
<tr>
  <td>
 　副菜2
  </td>
  <td>
　　工程１：野菜を切る
    <select name="status1[2]" class="sts1">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
　　工程２：材料を炒める
    <select name="status2[2]" class="sts2">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
   工程３：器に盛りつける
    <select name="status3[2]" class="sts3">
    <option value="0">未処理</option>
    <option value="1">済</option>
　　</select>
  </td>
  <td>
    コメント：<input type="text" name="comment[2]" class="cmt">
  </td>
</tr>
</table>

■やってみたこと
結果は、どの料理のコメントも同じ文字列がセットされ失敗です。
それから、どのプルダウンか？という点を反映できていないように思います。
これらの点がまさしく不明点です。

$("body").ready(function()
{
  $(".iv_sts1").on("change", function(e)
  {
    console.log("sts1 change");
    var sts1 = $(this).val().trim();
    var elem = $(this).parent().parent();
    if(sts1 == 1){
      $(".cmt").val("工程１まで済");
    }
  });
});

m.ts10806

2018/05/13 08:33

質問本文のPHPは本件とどのように関係しているのでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

js
1$("select").on("change", function()  {
2//変更した行を選択
3  var $row = $(this).closest('tr');
4
5//同じ行内で何番目の工程まで"済"になっているか調べる
6  var index = 0;
7  $row.find('select').each(function(){
8    index = $(this).val() === '1' ? $(this).parent().index() : index;
9  });
10
11//上で調べた数をコメントに挿入。"済"がなければ空白
12  var cmt = index === 0 ? '' : '工程' + index + 'まで済';
13
14//同じ行のコメント欄に表示
15  $row.find('.cmt').val( cmt );
16});

投稿2018/05/14 01:39

CODEISLE

総合スコア251

sts2はsts1に、sts3はsts2に依存していると思うのですが
対応しなくてもいいのでしょうか？
いまのままだと工程1､2をとばして工程3を済にすることができませんか？

javascript
1$(function(){
2  $('.sts1,.sts2,.sts3').on('change',function(){
3    $('.sts2').prop('disabled',function(){
4      return $(this).closest('tr').find('.sts1').val()=="0";
5    });
6    $('.sts3').prop('disabled',function(){
7      return $(this).closest('tr').find('.sts2').val()=="0"||$(this).closest('tr').find('.sts2').prop('disabled');
8    });
9    $('.cmt').each(function(){
10      $(this).val(
11        $(this).closest('tr').find('.sts3').val()=="1"&&!$(this).closest('tr').find('.sts3').prop('disabled')?"工程3":
12        $(this).closest('tr').find('.sts2').val()=="1"&&!$(this).closest('tr').find('.sts2').prop('disabled')?"工程2":
13        $(this).closest('tr').find('.sts1').val()=="1"&&!$(this).closest('tr').find('.sts1').prop('disabled')?"工程1":""
14        );
15    });
16  }).eq(0).trigger('change');
17});
18

HTML
1<table>
2<tr>
3  <td>
4  メインディッシュ
5  </td>
6  <td>
7　　工程１：野菜を切る
8    <select name="status1[0]" class="sts1">
9    <option value="0">未処理</option>
10    <option value="1">済</option>
11　　</select>
12  </td>
13  <td>
14　　工程２：材料を炒める
15    <select name="status2[0]" class="sts2">
16    <option value="0">未処理</option>
17    <option value="1">済</option>
18　　</select>
19  </td>
20  <td>
21   工程３：器に盛りつける
22    <select name="status3[0]" class="sts3">
23    <option value="0">未処理</option>
24    <option value="1">済</option>
25　　</select>
26  </td>
27  <td>
28    コメント：<input type="text" name="comment[0]" class="cmt">
29  </td>
30</tr>
31<tr>
32  <td>
33 　副菜1
34  </td>
35  <td>
36　　工程１：野菜を切る
37    <select name="status1[1]" class="sts1">
38    <option value="0">未処理</option>
39    <option value="1">済</option>
40　　</select>
41  </td>
42  <td>
43　　工程２：材料を炒める
44    <select name="status2[1]" class="sts2">
45    <option value="0">未処理</option>
46    <option value="1">済</option>
47　　</select>
48  </td>
49  <td>
50   工程３：器に盛りつける
51    <select name="status3[1]" class="sts3">
52    <option value="0">未処理</option>
53    <option value="1">済</option>
54　　</select>
55  </td>
56  <td>
57    コメント：<input type="text" name="comment[1]" class="cmt">
58  </td>
59</tr>
60<tr>
61  <td>
62 　副菜2
63  </td>
64  <td>
65　　工程１：野菜を切る
66    <select name="status1[2]" class="sts1">
67    <option value="0">未処理</option>
68    <option value="1">済</option>
69　　</select>
70  </td>
71  <td>
72　　工程２：材料を炒める
73    <select name="status2[2]" class="sts2">
74    <option value="0">未処理</option>
75    <option value="1">済</option>
76　　</select>
77  </td>
78  <td>
79   工程３：器に盛りつける
80    <select name="status3[2]" class="sts3">
81    <option value="0">未処理</option>
82    <option value="1">済</option>
83　　</select>
84  </td>
85  <td>
86    コメント：<input type="text" name="comment[2]" class="cmt">
87  </td>
88</tr>
89</table>