多選html無法正常工作

我試着實現多選，並且它顯示see the pic，但它不起作用。多選html無法正常工作

當我在任何底部單擊其無法正常工作，他們都沒有動....

任何一個可以幫助我.......

<script language="javascript"> 
 
\t \t $("#btnLeft").click(function() { 
 
    var selectedItem = $("#rightValues option:selected"); 
 
    $("#leftValues").append(selectedItem); 
 
}); 
 

 
$("#btnRight").click(function() { 
 
    var selectedItem = $("#leftValues option:selected"); 
 
    $("#rightValues").append(selectedItem); 
 
}); 
 

 
$("#rightValues").change(function() { 
 
    var selectedItem = $("#rightValues option:selected"); 
 
    $("#txtRight").val(selectedItem.text()); 
 
}); 
 
\t \t </script>

SELECT, INPUT[type="text"] { 
 
    width: 160px; 
 
    box-sizing: border-box; 
 
} 
 
SECTION { 
 
    padding: 8px; 
 
    background-color: #f0f0f0; 
 
    overflow: auto; 
 
} 
 
SECTION > DIV { 
 
    float: left; 
 
    padding: 4px; 
 
} 
 
SECTION > DIV + DIV { 
 
    width: 40px; 
 
    text-align: center; 
 
}

<html> 
 

 
\t <head> 
 
\t \t <!-- Bring to you by http://www.CSSTableGenerator.com --> 
 
\t \t <link rel="stylesheet" href="table.css" type="text/css"/> \t 
 
\t \t <script src="jquery-1.12.1.min.js"></script> 
 
\t \t 
 
\t </head> 
 

 
\t <body> 
 
\t 
 
\t \t <section class="container"> 
 
    <div> 
 
     <select id="leftValues" size="5" multiple></select> 
 
    </div> 
 
    <div> 
 
     <input type="button" id="btnLeft" value="&lt;&lt;" /> 
 
     <input type="button" id="btnRight" value="&gt;&gt;" /> 
 
    </div> 
 
    <div> 
 
     <select id="rightValues" size="4" multiple> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     <div> 
 
      <input type="text" id="txtRight" /> 
 
     </div> 
 
    </div> 
 
</section> 
 
\t \t 
 
\t </body> 
 
\t 
 
</html>

來源

2016-03-07 major m

Working fiddle

看起來像你的JS找不到DOM元素，因爲它是exc之前完滿成功頁面加載ecuted，所以只要把你的代碼中ready功能：

$(function(){ 
    $("#btnLeft").click(function() { 
     var selectedItem = $("#rightValues option:selected"); 
     $("#leftValues").append(selectedItem); 
    }); 

    $("#btnRight").click(function() { 
     var selectedItem = $("#leftValues option:selected"); 
     $("#rightValues").append(selectedItem); 
    }); 

    $("#rightValues").change(function() { 
     var selectedItem = $("#rightValues option:selected"); 
     $("#txtRight").val(selectedItem.text()); 
    }); 
})

希望這有助於。

來源

2016-03-07 16:28:07

是的。代碼很好，只需添加就緒功能即可。 –

多選html無法正常工作

回答

相關問題