使用jQuery更改下拉列表中的div值

Question

我需要根據下拉框中的選擇更改div的值-嘗試了此代碼，但腳本似乎無法正常工作

HTML下拉列表：

<form action="https://ccart.com/cart" method="post">
    <input type="hidden" name="name" value="T-shirt" />
    <input type="hidden" name="price" value="54" />
    <select name="size" id="Field">
        <option value="1{p-50}">Small</option>
        <option value="2{p-24}">Medium</option>
        <option value="3">Large</option>
    </select>
    <input type="submit" value="Lets go" class="cart"/>
</form>

    <div id="1" class="box">4</div>
    <div id="2" class="box">30</div>
    <div id="3" class="box">54</div>

我嘗試使用：

$(document).ready(function () {
    $('.box').hide();
    $('#1').show();
    $('#Field').change(function () {
        $('.box').hide();
        $('#' + $(this).val()).show();
    });
});       

jQuery稱為：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

下拉菜單正常運行，但無法顯示div。

現在工作正常，但按建議將id從數字更改為字符串時遇到問題

<option value="Small{p-50}">Small</option>
        <option value="Medium{p-24}">Medium</option>
        <option value="Large">Large</option>


<div id="Small" class="box">4</div>
    <div id="Medium" class="box">30</div>
    <div id="Large" class="box">54</div>

碼：

 $('.box').hide();
           $('#Small').show();
           $('#Field').change(function () {
               $('.box').hide();
               $('#' + parseInt($(this).val())).show();

           });

如果我保留1,2等原始ID值，則效果很好

Answer 1

由於以下原因而失敗：

    <option value="1{p-50}">Small</option>
    <option value="2{p-24}">Medium</option>

由於您的所有div都沒有ID屬性為#1{p-50} ，因此不會顯示。

除非將{p-50}或{p-24}用於任何事物，否則只需將其更改為：

    <option value="1">Small</option>
    <option value="2">Medium</option>

的jsfiddle

---

另外，正如Sarfraz所提到的，您的ID也不應僅是數字。

Answer 2

下拉菜單項的值與您的div的ID不匹配。 如果您真的想使用它們，則應該使用parseInt ：

$('.box').hide();
$('#1').show();
$('#Field').change(function () {
    $('.box').hide();
    $('#' + parseInt($(this).val())).show();
});

parseInt會將1{p-50}解析為1 ，一切正常。

注意：由於數字ID在HTML4中無效，因此您應確保定義HTML5文檔類型，該文檔類型更能容忍數字作為標識符。