如何使用螢火蟲進行調試並顯示單選按鈕的值

Question

我有單選按鈕，如下所示。

 <div id="lensType"> 

         <input type="radio" name="design" style="vertical-align: middle" value="1"/> 
         <label for="design">Single Vision</label><br/> 

         <input type="radio" name="design" style="vertical-align: middle" value="2" /> 
         <label for="material" >Accommodative Support</label><br/> 

         <input type="radio" name="design" style="vertical-align: middle" value="3"/> 
         <label for="design">Bifocal</label> <br/> 

         <input type="radio" name="design" style="vertical-align: middle" value="4" /> 
         <label for="material" >Varifocal (Intermediate/Near)</label><br/> 

         <input type="radio" name="design" style="vertical-align: middle" value="5"/> 
         <label for="material" >Varifocal (Distance/Near)</label> 

        </div> 

我正在做一個動態選擇。我有我的JavaScript代碼發佈的價值。現在看來供應商的價值已經發布了。以下是我的腳本的代碼。

$(document).ready(function(){ 

    function populate() { 
     fetch.doPost('getSupplier.php'); 
    } 

$('#lensType').change(populate); 

    var fetch = function() { 

var counties = $('#county'); 

return { 
doPost: function(src) { 

$('#loading_county_drop_down').show(); // Show the Loading... 
$('#county_drop_down').hide(); // Hide the drop down 
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case) 


    if (src) $.post(src, { supplier: $('#lensType').val() }, this.getSupplier); 

    else throw new Error('No source was passed !'); 
}, 

getSupplier: function(results) { 
    if (!results) return; 
    counties.html(results); 

$('#loading_county_drop_down').hide(); // Hide the Loading... 
$('#county_drop_down').show(); // Show the drop down 
} 
    } 
}(); 

populate(); 

}); 

PHP代碼：

<?php 
    if(isSet($_POST['supplier'])) { 

    include 'db.php'; 

    $stmt = $mysql->prepare("SELECT DISTINCT SupplierBrand FROM plastic WHERE   HeadingNo='".$_POST['supplier']."'"); 
    $stmt->execute(); 
    $stmt->bind_result($supplierBrand); 

    while ($row = $stmt->fetch()) : ?> 

<option value="<?php echo $supplierBrand; ?>" width="100px"><?php echo $supplierBrand; ?></option> 

我的問題是，當我調試，我注意到有沒有傳遞到PHP腳本值，這使得選擇空。我試圖通過螢火蟲輸出console.log來追蹤或調試，並在這方面失敗。 請協助這個代碼，它是爲了顯示一個單選按鈕的動態列表。

Answer 1

在JavaScript中，你所得到的div的價值，而不是單選按鈕：

$('#lensType').val() <--- change that 

爲了這樣的事情：

$("#lensType input:radio[name='design']:checked").val() 

Answer 2

進行調試：

$('input[name="design"]').change(function(){ 
console.log($('#lensType').find("input:radio[name ='design']:checked").val()); 
}); 

否則：

$('#lensType').find("input:radio[name ='design']:checked").val(); 

代替

$('#lensType').val() 

，你可能想將其包裝witg改變的功能，由於選擇的onload沒有設計：

$(document).ready(function(){ 
$('input[name="design"]').change(function(){ 
var design = $('input[name="design"]:checked').val(); 
    function populate() { 
     fetch.doPost('getSupplier.php'); 
    } 

$('#lensType').change(populate); 

    var fetch = function() { 

var counties = $('#county'); 

return { 
doPost: function(src) { 

$('#loading_county_drop_down').show(); // Show the Loading... 
$('#county_drop_down').hide(); // Hide the drop down 
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case) 


    if (src) $.post(src, { supplier: design }, this.getSupplier); 

    else throw new Error('No source was passed !'); 
}, 

getSupplier: function(results) { 
    if (!results) return; 
    counties.html(results); 

$('#loading_county_drop_down').hide(); // Hide the Loading... 
$('#county_drop_down').show(); // Show the drop down 
} 
    } 
}(); 

populate(); 
}); 
});