Question

我正在尝试创建一个Jquery函数，根据选择的其他下拉菜单添加或删除下拉菜单，

这是我第一次尝试使用Java脚本，我需要一些帮助来实现它。

这是我到目前为止所做的事情，但似乎无法让它工作，可以告诉我哪里出错了？

 $(document).ready(function(){
$(function remove() {

$("select#name").val();
        if (name == "United Kindom") {
                $("select.county").show();
                  }  else {
                $("select.county").hide(); });
});






<select name="ab" onchange="remove();">

Answer 1

您的代码包含语法错误，未声明的变量和范围问题。

您的代码可以更有效地重写：$(fn)其中fn是一个函数，相当于$(document).ready(fn)。此外，可以使用.toggle方法代替if-then-show-else-hide。

固定代码

内联处理程序也不起作用，因为在function remove函数中定义了$().ready。

要修复代码本身，请使用jQuery绑定事件处理程序，而不是使用内联处理程序：

$(function() {
    $('select[name=ab]').change(function() {
        var name = $("select#name").val();
        $("select.county").toggle(name == "United Kindom");
    });
});
//<select name="ab">

发现语法错误

正确缩进代码后，可以很容易地发现语法错误

$(document).ready(function () {
    $(function remove() {
        var name = $("select#name").val();     // Prefixed "var name = "
        if (name == "United Kindom") {
            $("select.county").show();
        } else {
            $("select.county").hide();
        } // <----------- This one is missing!
    });
});

Answer 2

首先，你正在使用的是Javascript和jQuery（一个Javascript库）的混搭。你必须明白这一点。只是你知道下面是jQuery，我会在帖子的末尾添加纯JS。试试这个：

$(document).ready(function(){
   $(".selectWrapper").on("change", "select#ab", function(){
      $("select.county").toggle($(this).val() != "United Kindom");
   });
});

<div class="selectWrapper">
   <select id="ab">

这也假设你有 <select class="country"> 代码中的某个地方。

// ---纯JS ----

   document.getElementById("ab").onchange = function(){
      var selects = document.getElementsByTagName("select"), countrySelect;
      for(var x in selects){
       countrySelect = (selects[x].className == "country")? select[x] : "";
      }
      countrySelect.style.display = (this.value == "United Kindom")? 'none' : 'block';
   };

Answer 3

并快速提示如何更轻松地使用jQuery

请记住，这是“少写，做多”的库：

//  Easy jquery way to run when doc loaded
$(function() {
    //  you dont need to include the tag in an id selector
    // remember, any way you can select an element in css, you can do in jQuery
    $("#Country").change(function() { // here i use the .change event to know when this select box's value has actually changed to a new value
        // i'm not sure exactly what you were trying to hide and show, 
        // i couldn't fllow where vaiable `name` came from, but this is 
        // how you could easily show or hide somthing based on this select's value
        var $value = $(this).val();
        // although, if you're gonna have alot of possible ifs, 
        // i would suggest a switch statement
        switch($value) {
            case "United Kingdom":
                // here you can choose to show a specific select for UK states/countries/ares (i'm not familiar with how it works, i'm sorry)
                $("#UKStates").show();
                // if you're going to show specific, prefilled select boxes,
                // then it would be advised to include a classname on each one
                // that you can refer to in order to hide the rest
                $(".select-states").hide();
                break;
            case "United States":
                // do work
                break;
            default:
                // do work
        }
        // otherwise, if you won't have many if statements,
        // just use a regular if statment, like so:
        // if ($value == "United Kindom") {
        //     $(".county").show();
        // }
        // else {
        //     $(".county").hide();
        // }
    })
});

注意在我的例子中，有很多评论教学，但不是很多代码。永远记住，jQuery完成所有工作，只做你需要的工作。

Answer 4

您可以通过将您的功能简化为此功能开始，利用.toggle()的showOrHide重载。

function remove() {
    $("select[name='ab']").toggle($("select[name='ab']").val() === "United Kingdom");
}

由于您正在加载jQuery，因此您也可以使用其事件处理，而不是使用内联onchange=""。像这样：

 $(function(){ // Wait for DOM to be ready
    $("select[name='ab']").change(remove); // Attach an change-lister
 });

所以完整的事情将是：

 $(function(){
    $("select[name='ab']").change(remove);
 });

function remove() {
    $("select[name='ab']").toggle($("select[name='ab']").val() === "United Kingdom"));
}

功能显示和隐藏表单元素

4 个答案:

固定代码

发现语法错误