Question

我正在尝试使用Jquery-Elements（滑块）构建一个表单。我还添加了一个Jquery-Plugin，它为我提供了一个复杂的drowpdown元素。两者都可以正常工作，只要它们在分开的文件中。当我在标题部分合并它们和所需的资源时，不会显示滑块或下拉列表。合并文件看起来像附加，crome控制台出现以下错误：

未捕获TypeError：对象[object Object]没有方法'selectList'

看起来标题中的资源会以某种方式覆盖自身？你能帮帮我吗？

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Eingabe</title>




  <link rel="stylesheet" type="text/css" href="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/css/selectlist.css" >
  <script type="text/javascript" src="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/scripts/jquery.min.js"></script>
  <script type="text/javascript" src="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/scripts/jquery.selectlist.pack.js"></script>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" >
  <style>#slider { margin: 10px; }  </style>
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 



  </head>

  <body>

<h1>Eingabe Suchauftrag</h1>

<table border="1">
  <tr>
    <td>Wo</td>
    <td>
    <select name="Stadt" size="1" onchange="fuellestadteile(this)">
      <option value="6">Frankfurt</option>
      <option value="7">Stuttgart</option> 
    </select>
    </td>

    <td>


    </td>
  </tr>

  <tr>
    <td>Zimmer Minimum:</td>
    <td><div id="sliderzimmer"></div></td>
  </tr>

  <tr>
    <td>Preisspanne:</td>
    <td><div id="slider-range"></div></td>
  </tr>

    <tr>
    <td>Vor- Nachname</td>
   <td><input type="name"/></td>
  </tr>
   <tr>
    <td>Emailadresse</td>
    <td><input type="email"/></td> 
  </tr>
  <tr><td colspan="2"><button type="button">Abschicken!</button><td></tr>
</table>


<p>Dein Suchauftrag:</p>
Ich suche in Frankfurt eine Wohnung
mit mindestestes  <input type="text" id="anzahlzimmer" style="border: 0; color: #f6931f; font-weight: bold;" />Zimmer die im Monat 
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
kostet.
Meine Emailadresse lautet: 





<!--<label for="anzahlzimmer">Price range:</label></p>
<label for="anzahlzimmer">Donation amount ($50 increments):</label></p>
--> 


<script>
$( "#slider" ).slider();
</script>




<script>
// Anzahl Zimmer
$(function() {
    $( "#sliderzimmer" ).slider({
      min: 1,
      max: 5,
      step: 1,
      value: 3,
      slide: function( event, ui ) {
        $( "#anzahlzimmer" ).val( ui.value );
      }
    });
    $( "#anzahlzimmer" ).val( $( "#sliderzimmer" ).slider( "value" ) );
  });
  </script>



 <script>
 //Preis
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 3000,
      step: 50,
      values: [ 800, 1200 ],
      slide: function( event, ui ) {
        $( "#amount" ).val(ui.values[ 0 ] + " EUR - " + ui.values[ 1 ]+" EUR" );
      }
    });
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
      " EUR - " + $( "#slider-range" ).slider( "values", 1 ) +" EUR" );
  });


  </script>



  <script>
   function uebertrage(wo,zimmerpreismin,zimmerpreismax,zimmeranzahl,vorname,nachname, email)
   {
       alert('Uebertrage '+wo+' '+zimmerpreismin+' '+zimmerpreismax+' '+zimmeranzahl+' '+vorname+' '+nachname+' '+email);
       $.ajax({
           type: "POST",
           cache: false,
           url: "form_process.php",
           data: "wo="+wo +"&zimmerpreismin="+zimmerpreismin+"&zimmerpreismax="+zimmerpreismax+"&zimmeranzahl="+zimmeranzahl+"&vorname="+vorname+"&nachname="+nachname+"&email="+email,
           /*data: { variable2: "variable2" },*/
           /*data: dataString,*/
           success: function(msg){
               alert("Success! "+msg);
               /*alert(variable2);*/
           }
       });

       }


   function validateEmail(email) {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        return emailReg.test( email );
    }

    var clicked = jQuery("button");

    clicked.click(function() {
       var wo="Frankfurt";

        var zimmerpreismin = $("#slider-range").slider("values", 0); 
        var zimmerpreismax = $("#slider-range").slider("values", 1);
        var zimmeranzahl = $("#sliderzimmer").slider("value");  
        var name  = jQuery("input[type='name']").val();

        var teile = name .split(" "); 
        var vorname = teile[0];
        var nachname= teile[1];


        var email = jQuery("input[type='email']").val();


        ( !validateEmail(email) ) ? alert('Ungültige Emailadresse bitte korrigieren') : alert("Richtige Addy und Zimmerpreismin "+zimmerpreismin+email+name) 

                    uebertrage(wo, zimmerpreismin,zimmerpreismax,zimmeranzahl, vorname,nachname, email);    
                    });

  </script>


  <script type="text/javascript">
function fuellestadteile(obj)
{
alert ('Hilfe'+obj.value);
}
</script>



<?php

include("/home/www/web0/html/devscan/private/mylibaryconnect.php");
$connID = connect_to_mylibrary();

$citychoice='6';
$databaseSelector="usr_devscan";
$query=mysql_db_query($databaseSelector,"SELECT location_internal_id , location_name FROM Locations WHERE location_internal_id LIKE '$citychoice%' ORDER BY location_internal_id ASC")or die(mysql_error());
$row_query = mysql_fetch_array($query);
$totalRows_query = mysql_num_rows($query);

while ($row_query = mysql_fetch_assoc($query)) {
    $dropdownlist[] = array($row_query['location_internal_id'],$row_query['location_name']);
}

?>


<select id="stadtteile" multiple="multiple" name="languages[]"  title="Stadtteile">

<?php
foreach ($dropdownlist as $zeile ) {
//ACHTUNG DER ERSTE DATENEINTRAG WIRD NICHT ANGEZEIGT ARRAYPROPBLEM?
echo '<option value="'.$zeile[0].'">'.$zeile[1].'</option>';

 } ?>

</select>



<script type="text/javascript">
  //$(document).ready(function () {
    $(function() {
    $('select#stadtteile').selectList({ sort: true });
  });
</script>

</body>
</html>

Answer 1

他们必须使用jQuery脚本标记。你必须加载jQuery＆amp;首先是jQuery UI。

Answer 2

加载jQuery＆amp; jQuery UI首先..同时删除jQuery库的重复...

你有：

 <script type="text/javascript" src="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/scripts/jquery.min.js"></script>

和

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

删除一个..（我建议保留最新的..）

前者是1.8.0

的缩小版

将两个Jquery表单元素分开工作但不能一起工作？

2 个答案: