如何使用表中的javascript检查值是否存在

Question

<select name="product">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>

<table id="ListProduct">
<tr data-id="1"><td>A</td></tr>
<tr data-id="4"><td>D</td></tr>
<tr data-id="5"><td>E</td></tr>
<tr data-id="6"><td>F</td></tr>
<tr data-id="7"><td>G</td></tr>
</table>

And my javascript:

$('select[name=product]').on('change', function(){
   var pid = $('select[name=product]').val();
   var table = $('#ListProduct');
   var check_value = $(table).find("tr").data('id').eq(pid);
   if(check_value) alert("ID exist") else alert("Not exist");
});

When I select value=1, bring error. How to fix it?

Answer 1

try this: http://jsfiddle.net/leojavier/1bnkfb06/

$('select[name=product]').on('change', function(){
   var pid = $(this).val();
   var table = $('#ListProduct');
   var check_value = $(table).find("tr").data('id');

   if(check_value == pid) {
       console.log("ID exist") 
   }
       else {
           console.log("Not exist");
       }
});

Answer 2

Add a new option to ensure that the ID for A can also be found

 $('select[name=product]').on('change', function(){ var pid = $(this).val(); var table = $('#ListProduct'); var check_value = $(table).find("tr").data('id'); (check_value == pid)?alert('ID exists'):alert('ID does not exist');//check if id exists }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="product"> <option>select</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <table id="ListProduct"> <tr data-id="1"><td>A</td></tr> <tr data-id="4"><td>D</td></tr> <tr data-id="5"><td>E</td></tr> <tr data-id="6"><td>F</td></tr> <tr data-id="7"><td>G</td></tr> </table> 

Answer 3

You get an error as .data('id') in your code returns an integer which doesn't have .eq method. .eq is a method of the jQuery object.

Also note that .data as getter returns value of the first element in the collection. You should either iterate through the tr collection and filter the matching elements or use the power of the jQuery selector engine:

$('select[name=product]').on('change', function() {
   var $tr = $('#ListProduct tr[data-id="'+ this.value +'"]');

   if ( $tr.length ) {
      alert("ID exist");
   } else { 
      alert("Not exist");
   }
});

Answer 4

You need to check wether the value of product matches the data id in listproduct like this. http://jsfiddle.net/38e2h5ao/

$('select[name=product]').on('change', function () {
    var pid = $('select[name=product]').val();
    var table = $('#ListProduct');
    var exist;
    $(table).find("tr").each(function () {
        var check_value = $(this).data('id');
        if (check_value == pid) {
            exist = true;
        }
    });

    if (exist) alert("ID exist");
    else alert("Not exist");
});