1. 首頁
  2. 問答
  3. 如何選擇表中當前選定的下拉選項td元素

如何選擇表中當前選定的下拉選項td元素

2017-01-13 58 views
-1

//關於選擇每行下拉的當前td元素我想禁用相應的輸入td元素 但此代碼僅適用於第一個下拉如何選擇表中當前選定的下拉選項td元素

 <html> 
     <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     </head> 
     <script> 
     $(document).ready(function() { 
     $("#d1").bind('change',function(){ 

     if($(this).closest('tr').find('#d1').val() == 'saab'){ 

     $("#d2").attr('disabled', 'disabled').val(''); 
      } 
     else{ 
     $("#d2").removeAttr('disabled'); 
     } 
     }); 
     }); 
     </script> 
     </head> 
     <body> 
     <h1>Cab</h1> 
     <table border="0"> 
      <tr> 
       <td class="select">Online Password (Repeated)&nbsp; </td> 
       <td><select name="D1" id="d1"> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
       </select></td> 
       <td > 
      <input type="text" value="" id="d2"> 
<!-- above is the input textbox i want to disable--> 
      </td> 
      </tr><tr> 
       <td class="select">Online Password (Repeated)&nbsp; </td> 
       <td><select name="D1" id="d1"> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
       </select></td> 
       <td > 
      <input type="text" value="" id="d2"> 
      </td> 
      </tr> 
      <tr> 
       <td class="select">Online Password (Repeated)&nbsp; </td> 
       <td><select name="D1" id="d1"> 
       <option value="volvo">Volvo</option> 
       <option value="saab">Saab</option> 
       <option value="mercedes">Mercedes</option> 
       <option value="audi">Audi</option> 
       </select></td> 
       <td> 
      <input type="text" value="" id="d2"> 
      </td> 
      </tr> 
      <tr> 

      </tr> 
     </table> 


     </body> 
     </html>

//這是我寫的，只在第一個TD元素的工作，在選擇第二個下拉TD函數調用本身是不會發生作用。

來源

2017-01-13 vijay ram

+1

'ID'應該是唯一的，也許使用這個類會更好？ – NewToJS

+0

在選擇相應的tr td下拉列表時，我想要禁用相同的tr td輸入元素，但是此代碼僅適用於第一個tr td select下拉列表，即函數調用只發生一次，第一個 –

+0

我想用相同的id因爲這些下拉菜單是以硬編碼標識的字符串形式出現的，這對於所有下拉菜單都是相同的。 –

回答

0

您的代碼中幾乎沒有問題。

1：HTML有重複的id元素，導致html無效。

2：您正在附加事件與id選擇器，如果您想要綁定一個事件與單個元素應該完成。

3：用於在同一行中查找輸入的選擇器再次出錯。

嘗試下面的代碼。

我已經將您的html中的id屬性更改爲class，並更改邏輯以在select中找到input元素。

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<script> 
 
    $(document).ready(function() { 
 
    $(".d1").on('change', function() { 
 
     var context = ($(this).parents("tr")); 
 
     if ($(this).val() == 'saab') { 
 
     $(".d2",context).attr('disabled', 'disabled').val(''); 
 
     } else { 
 
     $(".d2",context).removeAttr('disabled'); 
 
     } 
 
    }); 
 
    }); 
 
</script> 
 
</head> 
 

 
<body> 
 
    <h1>Cab</h1> 
 
    <table border="0"> 
 
    <tr> 
 
     <td class="select">Online Password (Repeated)&nbsp;</td> 
 
     <td> 
 
     <select name="D1" class="d1"> 
 
      <option value="volvo">Volvo</option> 
 
      <option value="saab">Saab</option> 
 
      <option value="mercedes">Mercedes</option> 
 
      <option value="audi">Audi</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" value="" class="d2"> 
 
     <!-- above is the input textbox i want to disable--> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="select">Online Password (Repeated)&nbsp;</td> 
 
     <td> 
 
     <select name="D1" class="d1"> 
 
      <option value="volvo">Volvo</option> 
 
      <option value="saab">Saab</option> 
 
      <option value="mercedes">Mercedes</option> 
 
      <option value="audi">Audi</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" value="" class="d2"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="select">Online Password (Repeated)&nbsp;</td> 
 
     <td> 
 
     <select name="D1" class="d1"> 
 
      <option value="volvo">Volvo</option> 
 
      <option value="saab">Saab</option> 
 
      <option value="mercedes">Mercedes</option> 
 
      <option value="audi">Audi</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" value="" class="d2"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 

 
    </tr> 
 
    </table> 
 

 

 
</body> 
 

 
</html>

來源

2017-01-13 13:17:58 Deep

+0

感謝您的答案，但非常感謝糾正我 –

+0

@vijayram NP很高興幫助:) – Deep

+0

@Deep打敗我秒：p – NewToJS

0

您應該使用class這樣的事情。

我已刪除重複的ID的和補充的選項

$(document).ready(function() { 
 
    $(".options").bind('change', function() { 
 
    if ($(this).val() == 'saab') { 
 
     $(this).closest('tr').find('input').attr('disabled', 'disabled').val(''); 
 
    } else { 
 
     $(this).closest('tr').find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="0"> 
 
    <tr> 
 
    <td class="select">Online Password (Repeated)&nbsp;</td> 
 
    <td> 
 
     <select name="D1" class="options"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" value=""> 
 
     <!-- above is the input textbox i want to disable--> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Online Password (Repeated)&nbsp;</td> 
 
    <td> 
 
     <select name="D1" class="options"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" value=""> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Online Password (Repeated)&nbsp;</td> 
 
    <td> 
 
     <select name="D1" class="options"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" value=""> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
</table>

更新class名稱：「我想與相同id作爲這些下拉菜單將以硬編碼的字符串形式出現，這對於所有下拉菜單都是相同的「

如果您不能添加class這些要素或編輯ID的，那麼這將工作，但我真的建議你找到一個方法來編輯這些ID的，並使用class名。這個方法可以正常工作，不需要HTML元素的編輯。

我已經選擇改爲"select[id=d1]"

$(document).ready(function() { 
 
    $("select[id=d1]").bind('change', function() { 
 
    if ($(this).val() == 'saab') { 
 
     $(this).closest('tr').find('input').attr('disabled', 'disabled').val(''); 
 
    } else { 
 
     $(this).closest('tr').find('input').removeAttr('disabled'); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="0"> 
 
    <tr> 
 
    <td class="select">Online Password (Repeated)&nbsp;</td> 
 
    <td> 
 
     <select name="D1" id="d1"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="" id="d2"> 
 
     <!-- above is the input textbox i want to disable--> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Online Password (Repeated)&nbsp;</td> 
 
    <td> 
 
     <select name="D1" id="d1"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="" id="d2"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Online Password (Repeated)&nbsp;</td> 
 
    <td> 
 
     <select name="D1" id="d1"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="" id="d2"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
</table>

如果您對源代碼的任何問題，上面請在下面發表評論，我會盡快回復您。

我希望這會有所幫助。快樂的編碼！

來源

2017-01-13 13:18:27 NewToJS

+0

謝謝噸，這是什麼發生俯瞰基礎 –

+0

@vijayram沒問題。如果您有任何問題隨時問，我會很樂意以任何方式提供幫助。 – NewToJS

+0

@vijayram由於您的評論，我添加了第二種方法*「下拉菜單以硬編碼的字符串形式出現」*。 – NewToJS

相關問題

 相關問題