0

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
  • 4
    Just Wrap your JS Code in $(document).ready(function(){ }); Jan 15, 2014 at 6:36
  • Like this? $(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'); } }); });
    – Black
    Jan 15, 2014 at 6:44
  • Ew, terrible formatting
    – Black
    Jan 15, 2014 at 6:45

3 Answers 3

2

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 !

5
  • This worked perfect, I didn't know I had to import jQuery from is CDN or wrap it, thank you. Is there a way I can keep all the javascript in the seperate .js file then import it and make it work that way?
    – Black
    Jan 15, 2014 at 6:58
  • The edit works as for how I want to set up the files, but making the change to the javascript seemed to create a bug when you change the first box to a different color, then the second box to one of the selections, then changing the first box again. The second box stops displaying the options.
    – Black
    Jan 15, 2014 at 7:24
  • 1
    Look at lines commented at end like: Note Change 2 Jan 15, 2014 at 7:33
  • 1
    That last edit is exactly what I needed. Now I can use this example to accomplish what I really wanted.Thanks for all the timely replies +1
    – Black
    Jan 15, 2014 at 7:42
  • 1
    I am Glad That I Could Help you! Jan 15, 2014 at 7:47
2

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.

-1

did you forget to include "jQuery"?

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.