顯示被JS

Question

我需要證明被JS選擇ID，通過該代碼只顯示1和第一選擇ID

我的代碼是這樣的HTML和JavaScript

<tr> 
<td> 
    <select name="jens_id[]" id="jens_id" required="" > 
    <option ></option> 
    <option >1</option> 
    <option >2</option> 
    </select> 
</td> 
</tr> 
<tr> 
<td> 
    <select name="jens_id[]" id="jens_id" required="" > 
    <option ></option> 
    <option >1</option> 
    <option >2</option> 
    </select> 
</td> 
</tr> 
<script> 
$(document).ready(function(){ 
    $('#jens_id').change(function(){ 
     statteId = $("#jens_id").val() 
     alert(statteId); 
    }); 
}); 
</script> 

可以幫助編輯腳本多選擇ID

Answer 1

的id屬性應否則只有第一個獲取（使用id選擇）選擇的頁內是唯一的，對於一組元件使用共同的類，而不是與變化事件處理程序中使用this來引用點擊的元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <select name="jens_id[]" class="jens_id" required=""> 
 
    <option ></option> 
 
    <option >1</option> 
 
    <option >2</option> 
 
    </select> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select name="jens_id[]" class="jens_id" required=""> 
 
    <option ></option> 
 
    <option >1</option> 
 
    <option >2</option> 
 
    </select> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<script> 
 
    $(document).ready(function() { 
 
    // or use attribute equals selector 
 
    // $('[name="jens_id[]"]') 
 
    $('.jens_id').change(function() { 
 
     statteId = $(this).val(); // or this.value 
 
     console.log(statteId); 
 
     // get the td and update with value 
 
     $(this).parent().next().text(statteId); 
 
    }); 
 
    }); 
 
</script>

Answer 2

使用jQuery的each()功能嘗試。而與Tagname或ClassName代替id .ID改變選擇是一個獨特的全文件

$(document).ready(function() { 
 
    $('select').each(function(){ 
 
    console.log($(this).val()) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
    <select name="jens_id[]" id="jens_id" required=""> 
 
    <option ></option> 
 
    <option selected>1</option> 
 
    <option >2</option> 
 
    </select> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <select name="jens_id[]" id="jens_id" required=""> 
 
    <option ></option> 
 
    <option >1</option> 
 
    <option selected>2</option> 
 
    </select> 
 
    </td> 
 
</tr>

Answer 3

$(document).ready(function() { 
 
    $('.jens_id').change(function() { 
 
    statteId = $('option:selected', this).text() 
 
    alert(statteId); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="jens_id[]" class="jens_id" required=""> 
 
    <option ></option> 
 
    <option >1</option> 
 
    <option >2</option> 
 
    </select> 
 

 
<select name="jens_id[]" class="jens_id" required=""> 
 
    <option ></option> 
 
    <option >3</option> 
 
    <option >4</option> 
 
    </select>

1. ID應該是唯一的，使用類，並使用此背景下，以告訴電流變化選擇

Answer 4

您現在已經意識到頁面上元素的ID應該是唯一的。

當你有多個具有相同ID的元素時，id(#)選擇器返回第一個匹配的元素。所以正如在其他答案中提到的那樣，如果可能的話，您應該使用類。

通過，如果你不能使用類和希望與ID查找，那麼你可以使用它像$('select#jens_id')或$('[id="jens_id"]')，並獲得所選擇的選項使用上下文this它會發現改變選擇元素所選擇的選項任何理由。

$(document).ready(function() { 
 
    $('select#jens_id').change(function() { 
 
     alert($(this).find('option:selected').text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="jens_id[]" id="jens_id" required=""> 
 
    <option ></option> 
 
    <option >1</option> 
 
    <option >2</option> 
 
    </select> 
 

 
<select name="jens_id[]" id="jens_id" required=""> 
 
    <option ></option> 
 
    <option >3</option> 
 
    <option >4</option> 
 
    </select>

添加multiple屬性來選擇，如果多個值需要選擇。