データテーブルでチェックボックスと選択オプションを実装する方法は？

Question

テーブルにajax呼び出しを設定します。最初の列には、行を選択および選択解除するためのチェックボックスがあり、PHPスクリプトにデータを送信します。私はまた、選択フィールドを持つ2つの列を持っています。 選択とコラム（2の）いずれかの機能をレンダリングする：あなたは、チェックボックスの初期コードを表示することがあり

$('#results tbody').on('click', 'input[type="checkbox"]', function(e){ 
     var $row = $(this).closest('tr'); 

     // Get row data 
     var data = table.row($row).data(); 

     $('#selectotpionmonths' + data['enc_unit']).change(function(){ 

     e.preventDefault(); 

     var selectedoptionformonths = $('#selectotpionmonths' + data['enc_unit']).find("option:selected").text();    

     if(selectedoptionformonths == 3) { 

      $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][3].price + '"]').prop('selected', true); 

     } else if(selectedoptionformonths == 6) { 

      $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][2].price + '"]').prop('selected', true); 

     } else if(selectedoptionformonths == 9) {    

      $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][1].price + '"]').prop('selected', true); 

     } else if(selectedoptionformonths == 12) {    

     $('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][0].price + '"]').prop('selected', true); 

     } 
     }); 

     if(data['price_numberofmonths'].length == 4) { 
     var monthsoption = $('#selectotpionmonths' + data['enc_unit']).find("option:selected").text();   
     var priceoption = $('#selectoptionprice' + data['enc_unit']).find("option:selected").text();   
     } else { 
     var monthsoption = data['price_numberofmonths'][0].months; 
     var priceoption = data['price_rrp'][0].price; 
     } 

     // Get row ID 
     var dataforserver = {name: data['enc_unit'], duration: monthsoption, price: priceoption}; 
     var rowId = dataforserver.name; 

     // Determine whether row ID is in the list of selected row IDs 
     var index = $.inArray(rowId, rows_selected); 

     // If checkbox is checked and row ID is not in list of selected row IDs 
     if(this.checked && index === -1){ 
     rows_selected.push(rowId); 
     units_selected.push(dataforserver); 
     // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs 
     } else if (!this.checked && index !== -1){ 
     rows_selected.splice(index, 1); 
     units_selected.splice(index, 1); 
     } 

     if(this.checked){ 
     $row.addClass('selected'); 
     } else { 
     $row.removeClass('selected'); 
     } 

     order_total = 0; 
     for(i=0; i < units_selected.length; i++) { 
      order_total += parseFloat(units_selected[i].price); 
     } 
     //console.log(order_total.toFixed(2)); 
     $("#ukhoanswer").html(

     "Number of units selected: " + units_selected.length + "<br/>" + 
     "Total cost of order: " + order_total.toFixed(2) 
    ); 

     // Update state of "Select all" control 
     updateDataTableSelectAllCtrl(table); 

     // Prevent click event from propagating to parent 
     e.stopPropagation(); 
    }); 

    // Handle click on table cells with checkboxes 
    $('#results').on('click', 'tbody td, thead th:first-child', function(e){ 
     $(this).parent().find('input[type="checkbox"]').trigger('click'); 
    }); 

    // Handle click on "Select all" control 
    $('thead input[name="select_all"]', table.table().container()).on('click', function(e){ 
     if(this.checked){ 
     $('#results tbody input[type="checkbox"]:not(:checked)').trigger('click'); 
     } else { 
     $('#results tbody input[type="checkbox"]:checked').trigger('click'); 
     } 

     // Prevent click event from propagating to parent 
     e.stopPropagation(); 
    }); 

：

{ 
    targets: 6, 
    render: function(data, type, full, meta) { 
    if(data.length == 4) { 
    return '<select class="form-control" id="selectotpionmonths' + data[0].cataloguenumber + '"><option value="'+ data[3].months 
       + '">' + data[3].months + '<option value="'+ data[2].months 
       + '">' + data[2].months + '<option value="'+ data[1].months 
       + '">' + data[1].months + '<option value="'+ data[0].months 
       + '">' + data[0].months + '</select>'; 
      } else { 
       return data[0].months; 
      } 
    } 
}, 

し、Clickイベントのハンドラと変更イベントにhere

選択フィールドでセルをクリックすると、その行のクリックイベントを防止したいと思います。 e.preventDefaultを追加しようとしましたが、成功しませんでした。選択オプションの列の場合、変更イベントのみがトリガーされます。

アイデア？

Answer 1

私は次のようでした：

 var selectField = $('.form-control'); 
     selectField.on('click', function(event) { 
      event.stopPropagation(); 
     }); 

セレクタは、選択オプションを使用して、細胞のためのものです。選択フィールドを最初にクリックすると、行が選択されます。しかし次回はオプションを選択すると、クリックイベントは防止され、行は選択/選択解除されません。

私は選択フィールドの最初のクリックで選択されている行を防ぐ方法を検討しています。