Show/Hide 使用单选按钮和 JQuery 的 Dropbox

Question

这是我的 HTML:

<input type="radio" value="rural" id="rural" name="landtype" checked>Rural
<input type="radio" value="urban" id="urban" name="landtype" checked>Urban

<select id="budget1" class="dbox1">
                    <option value="9000">8000php-10000php</option>
                    <option value="13000">12000php-14000php</option>
                    <option value="17000">16000php-18000php</option>
                </select>

<select id="budget2" class="dbox2">
                    <option value="10000">9000php-11000php</option>
                    <option value="14000">12000php-15000php</option>
                    <option value="18000">17000php-19000php</option>
                </select>

这是我的 javascript 代码：

<script type="text/javascript">

    $(document).ready(function(){
                      $('input[type="radio"]').click(function(){
                           if($(this).attr("value")=="rural"){

                                document.getElementById("budget2").hide();
                                document.getElementById("budget1").show();

                           }
                           if($(this).attr("value")=="urban"){
                                document.getElementById("budget1").hide();
                                document.getElementById("budget2").show();
                           }
    });
    });

</script>

我想要的是，如果我单击 "Rural" 单选按钮，"dbox2" 将隐藏，然后 "dbox1" 将显示。如果我单击 "Urban" 单选按钮，"dbox1" 将隐藏，然后 "dbox2" 将显示。

到目前为止，我得到的是“document.getElementById("budget1").hide();”行中的 "Error"，表示 "Uncaught TypeError: undefined is not a function"

有什么解决办法吗？

Answer 1

如果您正在使用 jQuery，请使用它并更改该行：

document.getElementById("budget2").hide();
document.getElementById("budget1").show();

至：

$("#budget2").hide();
$("#budget1").show();

编辑：抱歉，我忘了添加 ID 选择器。

Answer 2

$("#budget2").hide();


$("#budget1").show();

Answer 3

hide() 和 show() 是 jQuery 函数，这就是为什么您会收到这些错误的原因。使用 $() 获取这些元素，然后调用隐藏和显示。

Show/Hide 使用单选按钮和 JQuery 的 Dropbox

Show/Hide Dropbox using Radio Button and JQuery

html

javascript

jquery

show-hide

radio-button