表单对象的 JavaScript 大小

Question

我有一个非常关键的问题。

下面是我的jsp代码:

<html:select property="city"   name="city"  onchange="javascript:checkCity(this);">                             
                        <html:option value="N">NewYork</html:option>                      
                        <html:option value="F">France</html:option>
                        <html:option value="I">Italy</html:option>
                        <html:option value="P">Paris</html:option>
</html:select>

自从我的<html:select>以来可以有单个或多个html选择被放入for循环中。

下面是我的 JavaScript 代码:

var citySelected = new Array();
function checkCity(selObject)
{
     var form = document.forms[0];
     var cityObj =  form["city"];
     var len = cityObj.length;
     if(selObject==cityObj)      // if there is single <html:select> selObject is same as city Object.so this logic works fine
     {
        if(cityObj.value==cityObj.options[3].value)
        {
        alert("You have selected Paris City");
        citySelected[0] = true;
        }
        if(!cityObj.options[3].selected && cityObj[0])
        {
        var result = confirm("You have selected cities other than paris");
        if(result)
        {
            citySelected[0] = false;
        }
        else
        {
            cityObj.options[cityObj.options.selectedIndex].selected=false;
            cityObj.options[3].selected=true;
        }
        }
     }
     else{
         for(var i=0; i<len; i++) {  //if there are multiple <html:select> then take length of form object n iterate
                if (selObject == cityObj[i] )  
                {
                    if(cityObj[i].value==cityObj[i].options[3].value) // if 3rd option is selected
                    {
                        alert("You have selected Paris City");
                        citySelected[i] = true;
                    }
                    if(!sctypeObj[i].options[3].selected && citySelected[i]) //if 3rd option is deselected
                    {
                        var result = confirm("You have selected cities other than paris");
                        if(result)
                        {
                            cityObj[i] = false;
                        }
                    else
                    {
                        cityObj[i].options[cityObj[i].options.selectedIndex].selected=false;
                        cityObj[i].options[3].selected=true;
                    }
                    }
                }
         }
     }
}

下面是在 jsp 上运行的 Javascript onload() :

function onload()
{
         var form = document.forms[0];
         var formObj =  form["city"];
         var size=formObj.size;
         var len = formObj.length;

         for(var i=0; i<len; i++) {
         citySelected[i] = false;
         }
         if(size==0){   //if there is seingle <html:select> element
            var cityvalue=formObj.value;
            if(cityvalue=="P")
             {
                 citySelected[0] = true;
             }
         }
         else
         {
            for(var i=0; i<len; i++) {   //if there are multiple <html:select> elements
             var cityvalue=formObj[i].value;
             if(cityvalue=="P")
             {
                 citySelected[i] = true;
             }
            }
         }
}

这是我发现问题的地方。如果有单个或多个则加载<html:select>元素逻辑工作正常。但是当没有 <html:select> 时如果我可以选择删除所有下拉菜单，那么我的 jsp 中的所有元素都会抛出 Javascript 错误:

"size is null or not an object".

如何解决这个问题？在 onload()我正在区分 <html:select> 的功能使用大小的元素。

if(size==0)
{
   //logic for single <html:select>
}
else
{
  //logic for multiple html select
}

但是当没有<html:select>时如果我可以选择删除所有下拉菜单，那么我的 jsp 中的所有元素都会抛出 Javascript 错误:

"size is null or not an object".

如何解决这个问题？任何帮助都会很棒..

Answer 1

确定 <select> 数量的另一种方法表单中的元素将使用 jQuery的选择器如下所示:

$('#myForm select').length // returns number of <select> elements in the form