javascript - 链式选择插件，适用但不适用于所有人

Question

我正在做一个离线项目，为一家汽车经销商公司展示一些汽车，我正在使用这里的 Chained Selects Plugin (jQuery+Zepto) 。我的标题中的其他一些包括 simple_html_dom 和一个菜单。

我很高兴它的工作方式，但我们有一个二级下拉列表的大列表，我认为它挂在某个地方..

这是我的文件：

包括/header.php

<?php
date_default_timezone_set('Europe/Athens');
set_time_limit(0); 
include($_SERVER["DOCUMENT_ROOT"] . "/includes/simple_html_dom.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253" />

<script type="text/javascript">

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
    target.style.MozUserSelect="none"
else //All other route (ie: Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"

</script>
<style>
.mattblacktabs{
overflow: hidden;
width:450px;
background:#414141;
}
.mattblacktabs ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}

.attblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

.docked{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}
</style>

<link rel="stylesheet" type="text/css" href="http://localhost:54007/assets/jqueryslidemenu.css" />
<style type="text/css">
body,td,th {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
body {
    background-color: #FFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:54007/assets/jqueryslidemenu.js"></script>
<script type="text/javascript" src="http://localhost:54007/assets/jquery.chained.min.js"></script>
<!-- <script type="text/javascript" src="http://localhost:54007/assets/zepto-1.0.1.js"></script> -->
<script type="text/javascript" src="http://localhost:54007/assets/zepto.min.js"></script>
<script type="text/javascript" src="http://localhost:54007/assets/zepto-selector.js"></script>
</head>

<body oncontextmenu="return false;">

<div id="myslidemenu" class="jqueryslidemenu">
<!-- <ul>
<li>&nbsp;</li>
</ul> -->
<ul>
<li><a href="http://localhost:54007/index.php">&Alpha;&rho;&chi;&iota;&kappa;ή</a></li>
<li><a href="http://localhost:54007/samples/index.php">Samples</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="<?php echo $_SERVER["REQUEST_URI"];?>">Refresh</a></li>
<li><iframe src="/includes/none.php" align="right" height="30" width="300" name="noticeframe" scrolling="no" style="right:auto" frameborder="0" seamless="seamless"> <!-- Nothing to show without the iFrame --> </iframe></li>
</ul>
<br style="clear: left" />
</div>

我的中间“test3.php”

<?php include($_SERVER["DOCUMENT_ROOT"] . "/includes/header.php"); ?>
<body>
<form action="" method="get" enctype="application/x-www-form-urlencoded" name="cattest" target="_self">
<table width="850" border="0" cellspacing="0" cellpadding="2" style="margin-left:25px; margin-right:25px">
  <tr>
    <td width="282"><label for="category">Κατηγορία</label><br>
    <select name="category" id="category">
        <option value="">Όλα</option>
        <option value="18">4Χ4/Τζιπ/SUV</option>
        <option value="14">Αγροτικό/Pickup</option>
        <option value="485">Αγωνιστικό</option>
        <option value="12">Κάμπριο/Roadster</option>
        <option value="11">Κομπάκτ</option>
        <option value="15">Κουπέ-σπόρ</option>
        <option value="10">Κόμπι/Kάραβαν/Van</option>
        <option value="13">Λιμουζίνα/Sedan</option>
        <option value="7">Τρέιλερ</option>
        <option value="16">Αλλο</option>
    </select></td>
    <td width="282">1-2</td>
    <td width="282"><span><?php //<input name="Reset" type="reset" value="Καθαρισμός"/>&nbsp; ?> <input type="submit" value="Έυρεση"/></span></td>
  </tr>
  <tr>
    <td width="282">Μάρκα<br>
                <select name="make" id="make">
                   <option value="">--</option>
                   <option value="3831">Acura</option>
                   <option value="67">Aixam</option>
                   <option value="1">Alfa Romeo</option>
                   <option value="2">Alpina</option>
                   <option value="5070">Ariel</option>
                   <option value="638">Asia Motors</option>
                   <option value="3">Aston Martin</option>
                   <option value="4">Audi</option>
                   <option value="639">Austin Healey</option>
                   <option value="5">Austin Morris</option>
                   <option value="54">Austin Rover</option>
                   <option value="3900">Autobianchi</option>
                   <option value="7">Bentley</option>
                   <option value="298">Bmw</option>
                   <option value="640">Brilliance</option>
                   <option value="641">Bugatti</option>
                   <option value="8">Buick</option>
                   <option value="9">Cadillac</option>
                   <option value="642">Caterham</option>
                   <option value="643">Chery</option>
                   <option value="10">Chevrolet</option>
                   <option value="5348">China-Motors</option>
                   <option value="11">Chrysler</option>
                   <option value="105">Citroen</option>
                   <option value="5674">Club Car</option>
                   <option value="13">Cobra</option>
                   <option value="644">Corvette</option>
                   <option value="645">Dacia</option>
                   <option value="109">Daewoo</option>
                   <option value="15">Daihatsu</option>
                   <option value="16">DeTomaso</option>
                   <option value="17">Dodge</option>
                   <option value="18">Ferrari</option>
                   <option value="124">Fiat</option>
                   <option value="126">Ford</option>
                   <option value="21">Gmc</option>
                   <option value="22">Honda</option>
                   <option value="23">Hummer</option>
                   <option value="153">Hyundai</option>
                   <option value="646">Infiniti</option>
                   <option value="25">Innocenti</option>
                   <option value="155">Isuzu</option>
                   <option value="28">Jaguar</option>
                   <option value="27">Jeep</option>
                   <option value="647">Jiangling</option>
                   <option value="288">KTM</option>
                   <option value="165">Kia</option>
                   <option value="30">Lada</option>
                   <option value="176">Lamborghini</option>
                   <option value="32">Lancia</option>
                   <option value="33">Land Rover</option>
                   <option value="3828">Landwind</option>
                   <option value="34">Lexus</option>
                   <option value="3872">Lifan</option>
                   <option value="186">Ligier</option>
                   <option value="36">Lincoln</option>
                   <option value="37">Lotus</option>
                   <option value="38">Mahindra</option>
                   <option value="39">Maserati</option>
                   <option value="648">Maybach</option>
                   <option value="192">Mazda</option>
                   <option value="196">Mercedes-Benz</option>
                   <option value="42">Mg</option>
                   <option value="43">Mini</option>
                   <option value="198">Mitsubishi</option>
                   <option value="5367">Moretti</option>
                   <option value="45">Morgan</option>
                   <option value="5044">Neptun</option>
                   <option value="205">Nissan</option>
                   <option value="649">Nsu</option>
                   <option value="208">Opel</option>
                   <option value="5366">Panther</option>
                   <option value="213">Peugeot</option>
                   <option value="48">Plymouth</option>
                   <option value="49">Pontiac</option>
                   <option value="214">Porsche</option>
                   <option value="51">Proton</option>
                   <option value="221">Renault</option>
                   <option value="53">Rolls Royce</option>
                   <option value="6">Rover</option>
                   <option value="55">Saab</option>
                   <option value="650">Santana</option>
                   <option value="232">Seat</option>
                   <option value="56">Skoda</option>
                   <option value="57">Smart</option>
                   <option value="58">SsangYong</option>
                   <option value="59">Subaru</option>
                   <option value="242">Suzuki</option>
                   <option value="65">TVR</option>
                   <option value="61">Talbot</option>
                   <option value="3830">Tata</option>
                   <option value="5565">Tazzari</option>
                   <option value="248">Toyota</option>
                   <option value="63">Trabant</option>
                   <option value="64">Triumph</option>
                   <option value="651">Uaz</option>
                   <option value="70">Ueec</option>
                   <option value="66">Vauxhall</option>
                   <option value="251">Volkswagen</option>
                   <option value="254">Volvo</option>
                   <option value="69">Wartburg</option>
                   <option value="5705">Westfield</option>
                   <option value="652">Wiesmann</option>
                   <option value="5413">Zotye</option>
                   <option value="0">Αλλο</option>
                </select></td>
    <td width="282">Τύπος<br>
                <select name="model" id="model">
                    <option value="">Όλα</option>
                <!-- Acura 3831 -->
                    <option value="1061" class="3831">MDX</option>
                    <option value="1062" class="3831">NSX</option>
                    <option value="1063" class="3831">RL</option>
                    <option value="1064" class="3831">RSX</option>
                    <option value="1065" class="3831">TL</option>
                    <option value="1066" class="3831">TSX</option>
                <!-- Aixam 67 -->
                <!--    <option value="" class="67">Όλα</option> -->
                <!-- Alfa Romeo 1 -->
                    <option value="1" class="1">Alfa 33</option>
                    <option value="2" class="1">Alfa 75</option>
                    <option value="3" class="1">Alfa 90</option>
                    <option value="4" class="1">Alfa 145</option>
                    <option value="5" class="1">Alfa 146</option>
                    <option value="6" class="1">Alfa 147</option>
                    <option value="7" class="1">Alfa 155</option>
                    <option value="8" class="1">Alfa 156</option>
                    <option value="9" class="1">Alfa 159</option>
                    <option value="10" class="1">Alfa 164</option>
                    <option value="11" class="1">Alfa 166</option>
                    <option value="12" class="1">Alfasud</option>
                    <option value="13" class="1">Alfetta</option>
                    <option value="14" class="1">Breta</option>
                    <option value="15" class="1">CrossWagon</option>
                    <option value="16" class="1">GTV</option>
                    <option value="17" class="1">GT</option>
                    <option value="18" class="1">Giulia</option>
                    <option value="19" class="1">Giulietta</option>
                    <option value="1334" class="1">Mito</option>
                    <option value="20" class="1">RZ/SZ</option>
                    <option value="21" class="1">Spider</option>
                    <option value="22" class="1">SportWagon</option>
                    <option value="23" class="1">Sprint</option>
                <!-- Alpina 2 -->
                    <option value="568" class="2">B3</option>
                    <option value="569" class="2">B5</option>
                    <option value="570" class="2">B6</option>
                    <option value="571" class="2">B7</option>
                    <option value="572" class="2">B8</option>
                    <option value="573" class="2">B10</option>
                    <option value="574" class="2">B12</option>
                    <option value="576" class="2">D3</option>
                    <option value="575" class="2">D 10</option>
                    <option value="577" class="2">Roadster S</option>
                <!-- Ariel 5070 -->
                    <option value="1336" class="5070">Atom</option>
                <!-- Asia Motors 638 -->
                    <option value="1236" class="638">Rocsta</option>
                <!-- Aston Martin 3 -->
                    <option value="979" class="3">AR1</option>
                    <option value="981" class="3">DB7</option>
                    <option value="982" class="3">DB9</option>
                    <option value="980" class="3">DB</option>
                    <option value="983" class="3">Lagonda</option>
                    <option value="985" class="3">V8 Vantage</option>
                    <option value="984" class="3">V8</option>
                    <option value="986" class="3">V12 Vanquish</option>
                    <option value="987" class="3">Vanguish</option>
                    <option value="988" class="3">Vantage</option>
                    <option value="989" class="3">Virage</option>
                    <option value="990" class="3">Volante</option>
                <!-- Audi 4 -->
                    <option value="1087" class="4">80</option>
                    <option value="1088" class="4">90</option>
                    <option value="1089" class="4">100</option>
                    <option value="1090" class="4">200</option>
                    <option value="3134" class="4">A1</option>
                    <option value="1091" class="4">A2</option>
                    <option value="1092" class="4">A3</option>
                    <option value="1093" class="4">A4</option>
                    <option value="1297" class="4">A5</option>
                    <option value="1094" class="4">A6</option>
                    <option value="3221" class="4">A7</option>
                    <option value="1095" class="4">A8</option>
                    <option value="1096" class="4">Allroad</option>
                    <option value="1097" class="4">Cabriolet</option>
                    <option value="1098" class="4">Coupe</option>
                    <option value="3205" class="4">Q3</option>
                    <option value="1303" class="4">Q5</option>
                    <option value="1099" class="4">Q7</option>
                    <option value="1100" class="4">Quattro</option>
                    <option value="1304" class="4">R8</option>
                    <option value="1101" class="4">RS2</option>
                    <option value="1102" class="4">RS4</option>
                    <option value="1103" class="4">RS6</option>
                    <option value="1104" class="4">S2</option>
                    <option value="1105" class="4">S3</option>
                    <option value="1106" class="4">S4</option>
                    <option value="1315" class="4">S5</option>
                    <option value="1107" class="4">S6</option>
                    <option value="1108" class="4">S8</option>
                    <option value="1109" class="4">TT</option>
                    <option value="1110" class="4">V8</option>
                <!-- Austin Healey 639 -->
                <!--    <option value="" class="639">Όλα</option> -->
                <!-- Austin Morris 5 -->
                <!--    <option value="" class="5">Όλα</option> -->
                <!-- Austin Rover 54 -->
                <!--    <option value="" class="54">Όλα</option> -->
                <!-- Autobianchi 3900 -->
                <!--    <option value="" class="3900">Όλα</option> -->
                <!-- Bentley 7 -->
                    <option value="1263" class="7">Arnage</option>
                    <option value="1264" class="7">Azure</option>
                    <option value="1265" class="7">Brooklands</option>
                    <option value="1266" class="7">Continental</option>
                    <option value="1267" class="7">Eight</option>
                    <option value="1268" class="7">Mulsanne</option>
                    <option value="1270" class="7">Turbo RT</option>
                    <option value="1269" class="7">Turbo R</option>
                    <option value="1271" class="7">Turbo S</option>
                <!-- BMW 238 -->
                    <option value="3238" class="238">114</option>
                    <option value="924" class="238">116</option>
                    <option value="925" class="238">118</option>
                    <option value="926" class="238">120</option>
                    <option value="1329" class="238">125</option>
                    <option value="927" class="238">130</option>
                    <option value="1330" class="238">135</option>
                    <option value="928" class="238">315</option>
                    <option value="929" class="238">316</option>
                    <option value="930" class="238">318</option>
                    <option value="931" class="238">320</option>
                    <option value="932" class="238">323</option>
                    <option value="933" class="238">324</option>
                    <option value="934" class="238">325</option>
                    <option value="935" class="238">328</option>
                    <option value="936" class="238">330</option>
                    <option value="937" class="238">335</option>
                    <option value="3281" class="238">ActiveHybrin 3</option>
                </select>
    </td>
    <td width="282">2-3</td>
  </tr>
  <tr>
    <td width="282">Τιμή από<br>
    <select name="price-from" id="price-from">
                    <option value="">Όλα</option>
                    <option value="&gt;0">0 €&lt;/option>
                    <option value="&gt;50">50 €&lt;/option>
                    <option value="&gt;100">100 €&lt;/option>
                    <option value="&gt;200">200 €&lt;/option>
                    <option value="&gt;300">300 €&lt;/option>
                    <option value="&gt;400">400 €&lt;/option>
                    <option value="&gt;500">500 €&lt;/option>
                    <option value="&gt;1000">1000 €&lt;/option>
                    <option value="&gt;1500">1500 €&lt;/option>
                    <option value="&gt;2000">2000 €&lt;/option>
                    <option value="&gt;3000">3000 €&lt;/option>
                    <option value="&gt;4000">4000 €&lt;/option>
                    <option value="&gt;5000">5000 €&lt;/option>
                    <option value="&gt;6000">6000 €&lt;/option>
                    <option value="&gt;7000">7000 €&lt;/option>
                    <option value="&gt;8000">8000 €&lt;/option>
                    <option value="&gt;9000">9000 €&lt;/option>
                    <option value="&gt;10000">10000 €&lt;/option>
                    <option value="&gt;11000">11000 €&lt;/option>
                    <option value="&gt;12000">12000 €&lt;/option>
                    <option value="&gt;13000">13000 €&lt;/option>
                    <option value="&gt;14000">14000 €&lt;/option>
                    <option value="&gt;15000">15000 €&lt;/option>
                    <option value="&gt;17500">17500 €&lt;/option>
                    <option value="&gt;20000">20000 €&lt;/option>
                    <option value="&gt;22500">22500 €&lt;/option>
                    <option value="&gt;25000">25000 €&lt;/option>
                    <option value="&gt;27500">27500 €&lt;/option>
                    <option value="&gt;30000">30000 €&lt;/option>
                    <option value="&gt;35000">35000 €&lt;/option>
                    <option value="&gt;40000">40000 €&lt;/option>
                    <option value="&gt;45000">45000 €&lt;/option>
                    <option value="&gt;50000">50000 €&lt;/option>
                    <option value="&gt;55000">55000 €&lt;/option>
                    <option value="&gt;60000">60000 €&lt;/option>
                </select></td>
    <td width="282">3-2</td>
    <td width="282">3-3</td>
  </tr>
  <tr>
    <td width="282">4-1</td>
    <td width="282">4-2</td>
    <td width="282">4-3</td>
  </tr>
  <tr>
    <td width="282">5-1</td>
    <td width="282">5-2</td>
    <td width="282">5-3</td>
  </tr>
  <tr>
    <td width="282">6-1</td>
    <td width="282">6-2</td>
    <td width="282">6-3</td>
  </tr>
  <tr>
    <td width="282">7-1</td>
    <td width="282">7-2</td>
    <td width="282">7-3</td>
  </tr>
  <tr>
    <td width="282">8-1</td>
    <td width="282">8-2</td>
    <td width="282">8-3</td>
  </tr>
  <tr>
    <td width="282">9-1</td>
    <td width="282">9-2</td>
    <td width="282">9-3</td>
  </tr>
  <tr>
    <td width="282">10-1</td>
    <td width="282">10-2</td>
    <td width="282">10-3</td>
  </tr>
  <tr>
    <td width="282">11-1</td>
    <td width="282">11-2</td>
    <td width="282">11-3</td>
  </tr>
  <tr>
    <td width="282">12-1</td>
    <td width="282">12-2</td>
    <td width="282">12-3</td>
  </tr>
</table>
</form>

<script type="text/javascript" charset="windows-1253">
    /* For jquery.chained.js (jquery.chained.min.js) */
    $("#model").chained("#make");
    $("#make").chained("#3831");
    $("#make").chained("#67");
    $("#make").chained("#1");
    $("#make").chained("#2");
    $("#make").chained("#1336");
    $("#make").chained("#1236");
    $("#make").chained("#3");
    $("#make").chained("#4");
    $("#make").chained("#639");
    $("#make").chained("#5");
    $("#make").chained("#54");
    $("#make").chained("#3900");
    $("#make").chained("#7");
    $("#make").chained("#238");
  </script>
<?php 
include($_SERVER["DOCUMENT_ROOT"] . "/includes/footer.php"); 
?>

包括/footer.php

<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>
</body></html>

在宾利之前似乎无法理解为什么它可以工作，但是当我选择宝马时，它不会显示第二个下拉菜单。

也许我错过了一些东西，似乎看不到什么。

非常需要帮助，我们将不胜感激。

非常感谢，提前！

javascript - 链式选择插件，适用但不适用于所有人

0 回答 0

Related

Reference