1. ホーム
  2. 質問と答え
  3. jqueryの変更プレースホルダattrの値

jqueryの変更プレースホルダattrの値

2017-05-23 7 views
0

私が達成したいものをjqueryの変更プレースホルダattrの値

$(document).ready(function() { 
 
    $('#f05_0002').change(function() { 
 

 
    if ($("#f05_0002").val() == "OFF TRACK") { 
 
     $("#f06_0002").attr("placeholder", "Please state what's not achieved, recommendations to be achieved"); 
 
    }; 
 

 
    if ($("#f05_0002").val() == "ON TRACK") { 
 
     $("#f06_0002").attr("placeholder", "Please state the exact achievement"); 
 
    }; 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table class="t-Report-report" summary="S1 - 2017"> 
 
    <thead> 
 
    <tr> 
 
     <th class="t-Report-colHead" align="center" id="JAN_WEEK1_STATUS">Status</th> 
 
     <th class="t-Report-colHead" align="center" id="JAN_WEEK1">Week</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    <tr> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0002" id="f05_0002_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0002"> 
 
<option value="" selected="selected"></option> 
 
<option value="OFF TRACK" >Off Track</option> 
 
<option value="ON TRACK" >On Track</option> 
 
</select> 
 
     </td> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0002" id="f06_0002_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0002"></textarea> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0003" id="f05_0003_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0003"> 
 
      <option value="" selected="selected"></option> 
 
      <option value="OFF TRACK" >Off Track</option> 
 
      <option value="ON TRACK" >On Track</option> 
 
     </select> 
 
     </td> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0003" id="f06_0003_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0003"></textarea> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0004" id="f05_0004_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0004"> 
 
      <option value="" selected="selected"></option> 
 
      <option value="OFF TRACK" >Off Track</option> 
 
      <option value="ON TRACK" >On Track</option> 
 
     </select> 
 
     </td> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0004" id="f06_0004_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0004"></textarea> 
 
     </td> 
 
    </tr>

この表にこれを持っている私は、「ステータス」の値を変更すると、それはのプレースホルダattrの値を更新することです週、私はこのコードを試したが、私は良い考えではない各行のためにそれを繰り返さなければならないことを発見しました

出典

2017-05-23 George S.

+3

のようなDOM要素を通過することができ、私はあなたを励ましますコードをよりよくインデントします。 – evolutionxbox

+0

'.prop'で試してみてください。しかし、if文が満たされていない可能性があります。 – ThisGuyHasTwoThumbs

+0

あなたのJSコードに余分な'}）; 'がありました。あなたのコードがこのようなものか、ここに貼り付ける間に何かが混乱しているかどうかは分かりません。 – RRikesh

答えて

0

ただ、この我々のような汎用的なコードを書くコードを繰り返す必要はありません。この$(this).closest("tr").find('textarea').attr("placeholder")

$(document).ready(function() { 
 
$('select').change(function() { 
 

 
    if ($(this).val() =="OFF TRACK") { 
 
\t \t \t  
 
    $(this).closest("tr").find('textarea').attr("placeholder","Please state what's not achieved, recommendations to be achieved"); 
 
    } 
 

 
    if ($(this).val() =="ON TRACK") { 
 
    
 
    $(this).closest("tr").find('textarea').attr("placeholder","Please state the exact achievement"); 
 

 
    } 
 

 
}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="t-Report-report" summary="S1 - 2017"> 
 
<thead> 
 
<tr> 
 
<th class="t-Report-colHead" align="center" id="JAN_WEEK1_STATUS" >Status</th> 
 
<th class="t-Report-colHead" align="center" id="JAN_WEEK1" >Week</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 

 
<tr> 
 
<td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
<label for="f05_0002" id="f05_0002_LABEL" class="u-VisuallyHidden"></label> 
 
<select name="f05" class="u-TF-item u-TF-item--select " id="f05_0002"> 
 
<option value="" selected="selected"></option> 
 
<option value="OFF TRACK" >Off Track</option> 
 
<option value="ON TRACK" >On Track</option> 
 
</select> 
 
</td> 
 
<td class="t-Report-cell" headers="JAN_WEEK1"> 
 
<label for="f06_0002" id="f06_0002_LABEL" class="u-VisuallyHidden"></label> 
 
<textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0002"></textarea> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
    <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0003" id="f05_0003_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0003"> 
 
      <option value="" selected="selected"></option> 
 
      <option value="OFF TRACK" >Off Track</option> 
 
      <option value="ON TRACK" >On Track</option> 
 
     </select> 
 
    </td> 
 
    <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0003" id="f06_0003_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0003"></textarea> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0004" id="f05_0004_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0004"> 
 
      <option value="" selected="selected"></option> 
 
      <option value="OFF TRACK" >Off Track</option> 
 
      <option value="ON TRACK" >On Track</option> 
 
     </select> 
 
    </td> 
 
    <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0004" id="f06_0004_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0004"></textarea> 
 
    </td> 
 
</tr> 
 
<tbody> 
 
</table>

出典

2017-05-23 11:23:18 JYoThI

+0

答えがありがとう、彼らはすべて私のために働いています –

+0

私の答えが便利な場合は緑色のチェックマークを付けると、将来のユーザーリファレンス@GeorgeSに役立ちます。 – JYoThI

1

あなたがこれを行う方法は$('select[id^="f05_000"]')を使用することです。

idで始まるselectのすべてがf05_000で始まるものをすべて選択します。

その後、我々は$("#f06_" + id)そのあなたの行構造を仮定し

$(document).ready(function() { 
 
    $('select[id^="f05_000"]').change(function() { 
 
    var id = $(this).attr("id").split('_')[1]; 
 
    if ($(this).val() == "OFF TRACK") { 
 
     $("#f06_" + id).attr("placeholder", "Please state what's not achieved, recommendations to be achieved"); 
 
    }; 
 

 
    if ($(this).val() == "ON TRACK") { 
 
     $("#f06_" + id).attr("placeholder", "Please state the exact achievement"); 
 
    }; 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="t-Report-report" summary="S1 - 2017"> 
 
    <thead> 
 
    <tr> 
 
     <th class="t-Report-colHead" align="center" id="JAN_WEEK1_STATUS">Status</th> 
 
     <th class="t-Report-colHead" align="center" id="JAN_WEEK1">Week</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    <tr> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0002" id="f05_0002_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0002"> 
 
<option value="" selected="selected"></option> 
 
<option value="OFF TRACK" >Off Track</option> 
 
<option value="ON TRACK" >On Track</option> 
 
</select> 
 
     </td> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0002" id="f06_0002_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0002"></textarea> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0003" id="f05_0003_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0003"> 
 
      <option value="" selected="selected"></option> 
 
      <option value="OFF TRACK" >Off Track</option> 
 
      <option value="ON TRACK" >On Track</option> 
 
     </select> 
 
     </td> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0003" id="f06_0003_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0003"></textarea> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> 
 
     <label for="f05_0004" id="f05_0004_LABEL" class="u-VisuallyHidden"></label> 
 
     <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0004"> 
 
      <option value="" selected="selected"></option> 
 
      <option value="OFF TRACK" >Off Track</option> 
 
      <option value="ON TRACK" >On Track</option> 
 
     </select> 
 
     </td> 
 
     <td class="t-Report-cell" headers="JAN_WEEK1"> 
 
     <label for="f06_0004" id="f06_0004_LABEL" class="u-VisuallyHidden"></label> 
 
     <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0004"></textarea> 
 
     </td> 
 
    </tr>

出典

2017-05-23 11:21:09

+0

説明を追加してください。あなたは読者のために答えています – Rajesh

+0

私は共通の要素すべてにクラスを追加し、jquery関数または提案した方法を適用することを提案しようとしていました。 –

+0

@Rajesh私が話しているように私はそれを書いています –

0

でテキストエリアを選択var id = $(this).attr("id").split('_')[1]

、最後にid（000＃）の最後の部分を取得することができます<tr>あなたはの代わりにclassを使用する一般的なコードの下で試すことができます：

$(document).ready(function() { 
    $('.u-TF-item--select').change(function() { 

     if ($(this).val() =="OFF TRACK") { 
      //find the parent tr and then look for element with class u-TF-item--textarea 
      $(this).closest("tr").find(".u-TF-item--textarea").attr("placeholder","Please state what's not achieved, recommendations to be achieved"); 
     }; 

     if ($(this).val() =="ON TRACK") { 
      $(this).closest("tr").find(".u-TF-item--textarea").attr("placeholder","Please state the exact achievement"); 
     }; 

    }); 

});

出典

2017-05-23 11:21:47 vijayP

関連する問題

 関連する問題