stackoom
  简体   繁体   中英

How do I implement this JSFiddle example in html and .js files

 原文  2014-01-15 06:35:12  7   3    javascript/ jquery/ html/ css

Question

The JSFiddle example in question is http://jsfiddle.net/3vPgY/10/

I copied and pasted the HTML portion into my html file and the two select boxes show up. 

<form>
<select id="refine">
    <option class="default" value="0">Please refine...</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>
<select id="everything" disabled="disabled">
    <option class="default" value="">Please select</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
</select>
</form>

I put the css into my .css file. I copied and pasted the jQuery function into my .js file at the bottom exactly as it is, and when I load the page the jQuery doesn't seem to be working at all. 

var everything = $('#everything').clone(true);

$('#refine').change(function () {

var selectColour = $('option:selected', this).val().replace(/ /g, "-");

if (refine != 0) {

    var everythingRefined = everything.clone(true).find('.default,.'+selectColour);

    $('#everything').removeAttr('disabled');
    $('#everything').empty().append(everythingRefined);

} else {

    $('#everything').attr('disabled', 'disabled');

}

});

I'm wondering if I didn't put the jQuery into my .js file correctly. The .js file already had some javascripts, and the .js file is included in the HTML file. It should be working, I don't know what I am doing wrong.

3 answers

solution1
 2 ACCPTED  2014-01-15 06:48:17

Many A times Fiddle Doesn't Provide The details like:

You've to wrap your JQuery Code In :

$(document).ready(function(){ // all Jquery Code. });

But for this

You need to import jquery from its CDN as: 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

And then Your JS code as: 

<script type="text/javascript">
$(document).ready(function(){
//all Your JS+Jquery.
});
</script>

So In Your case : It is Like: 

<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var everything = $('#everything').clone(true);
$('#refine').change(function () {
var selectColour = $('option:selected', this).val().replace(/ /g, "-");
if (refine != 0) {    
    var everythingRefined = everything.clone(true).find('.default,.'+selectColour);
    $('#everything').removeAttr('disabled');
    $('#everything').empty().append(everythingRefined);
} else {    
    $('#everything').attr('disabled', 'disabled');    
}    
});
});
</script>
<style type="text/css">
form {
    padding: 20px;
}
</style>
</head>
<body>
<form>
<select id="refine">
    <option class="default" value="0">Please refine...</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>
<select id="everything" disabled="disabled">
    <option class="default" value="">Please select</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
</select>
</form>
</body>
</html>

--EDIT--

According To your Comment:

To Keep Your JS in another File: Create a File myjs.js (You can give any name)
Keep your all JS code in that file. and then USE: 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="path/to/myjs.js"></script>

snippet of contents of myjs.js in this case: file: myjs.js : 

var everything; //note change 2
function changer(x){//note change
var selectColour = $('option:selected', x).val().replace(/ /g, "-"); //note change
if (refine != 0) {    
var everythingRefined = everything.clone(true).find('.default,.'+selectColour);
$('#everything').removeAttr('disabled');
$('#everything').empty().append(everythingRefined);
} else {    
$('#everything').attr('disabled', 'disabled');    
}    
}

And Change Your HTML as: file filename.html : 

<html>
<head>
<title>...</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="path/to/myjs.js"></script><!-- Note: Change -->
<style type="text/css">
form {
    padding: 20px;
}
</style>
</head>
<body OnLoad="everything = $('#everything').clone(true);"><!-- Note:change 2-->
<form>
<select id="refine" onChange="changer(this);"> <!-- Note Change -->
    <option class="default" value="0">Please refine...</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
</select>
<select id="everything" disabled="disabled">
    <option class="default" value="">Please select</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="green" value="green-sel">Show only if Green selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="blue" value="blue-sel">Show only if Blue selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
    <option class="red" value="red-sel">Show only if Red selected</option>
</select>
</form>
</body>
</html>

Hope It'll Help you!! Cheers !

solution2
 2  2014-01-15 06:51:39

I think you need to keep this line 

var everything = $('#everything').clone(true);

inside of change method. Just check if everything is defined inside of change function by doing console.log(everything) inside of change function.

Hope this is useful.

solution3
 -1  2014-01-15 06:39:57

您忘了包含“ jQuery”吗？ 

 http://code.jquery.com/jquery-latest.min.js

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Attempting to implement JSFiddle example How do I add arbitrary javascript files from GitHub in jsFiddle? How do I get an img click to execute js using jsfiddle How do I post a jsfiddle example of some trouble I'm seeing in Rails? How do I implement external js file in html webpage? How do I implement a html/css/js theme into Vue properly? Why does the smallest bubble size of this Highcharts jsFiddle example seem incorrect and how do I fix it? How do you put jsfiddle on your html How do I prevent 2 js files to be overwrite in my HTML code? How do I bundle CSS and js files into a single HTML file?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM