I have this snippet below
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="show">
Sample Text
</div>
<select name="test" id="selectTest">
<option value="00"></option>
<option value="01">Click this to hide text</option>
<option value="02">Click this to show text</option>
</select>
</body>
</html>
Above snippets looks fine, but i am getting trouble when the option where selected from the first when the page loaded. I have to click the different button to make the hide function works. I solved that problem by adding the if ... else in my code so that when the page loaded the hide function will run properly.
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
if($("#selectTest").val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
Above code looks not appropriate because i have to repeat the function that i have made, is there any better way to resolved this problem ?
Instead of writing code twice, you can trigger the event (change) using jQuery's .trigger():
$("#selectTest").trigger('change');
Working Code Example:
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
});
$("#selectTest").trigger('change');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show">
Sample Text
</div>
<select name="test" id="selectTest">
<option value="00"></option>
<option value="01">Click this to hide text</option>
<option value="02">Click this to show text</option>
</select>
I am using the multiple fastselect. I can't seem to get the refresh to work. What I mean by that is I need to be able add a new option to the list after selecting items from the dropdown list.
If I click the add button1 the first time it works. When I select an item from the list and then click the add button1 again to add to the list the add no longer works.
Any suggestions on what I might be doing wrong?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/fastselect.min.css">
<script src="js/jquery_2.1.1.js"></script>
<script src="js/fastselect.standalone.min.js"></script>
<style type="text/css">
.fstResultItem .fstSelected {
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<h2>Multiple Select</h2>
<div>
<select id="example2" class="example2" multiple="multiple">
<option value="test1">C1</option>
<option value="test2">C2</option>
<option value="test3">C3</option>
<option value="test4">C4</option>
<option value="test5">C5</option>
<option value="test6">C6</option>
<option value="test7">C7</option>
<option value="test8">C8</option>
<option value="test9">C9</option>
</select>
<div>
<button id="button1">Add Item Set 1</button>
<button id="button2">Add Item Set 2</button>
<button id="rebuild">Rebuild</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#example2').fastselect({});
$('#button1').click(function () {
//alert('button1 click');
$('#example2').append('<option value="add1">Addition 1</option>');
setTimeout(function () {
$('#example2').fastselect();
}, 500);
});
$('#button2').click(function () {
//alert('button2 click')
$('#example2').append('<option value="add1">Addition 1</option>');
});
$('#rebuild').click(function () {
alert('rebuilding');
$('#example2').fastselect();
});
});
</script>
</body>
</html>
The initial options of the select are copied to a hidden div when calling .fastselect() (you can check that with the developer tools). Later additions to the options are not reflected in the copy.
A possible solution would be to remove fastselect from the select and then add it again:
$('#example2').append('<option value="add1">Addition 1</option>').data('fastselect').destroy();
$('#example2').fastselect();
Line one adds the new select option and then destroys the fastselect instance and line two initializes it again.
I needed a "load" function with caching disabled. To do that I wrote:
FileName: RootFoolder/script.js
jQuery.fn.extend({
loadWithoutCache: function() {
var element = $(this);
if (arguments[0] != undefined) {
$.ajax({url: arguments[0], cache: false, dataType: "html", success: function(data, textStatus, XMLHttpRequest) {
element.html(data);
}});
}
else {
console.log("Invalid Arguments");
}
}
});
The above works fine when I use it ONCE. However, if I use it a second time, I get loadWithoutCache is undefined.
I am using it like below:
Filename: RootFolder/index.html
<html>
<head>
<title>Page Loader</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>
Some Text Description<br /><br />
<b>Choose a page:</b><br />
<select id="section">
<option value="1">Page 1</option>
<option value="2">Page 2</option>
</select>
<div id="content">
</div>
<script type="text/javascript">
$('#section').on('change', function() {
var pages = ["page1.html",
"page2.html"];
var index = $(this).val() - 1;
$("#content").loadWithoutCache(pages[index]);
});
</script>
</p>
</body>
</html>
FileName: RootFolder/page1.html
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br />
<h3>Page 1</h3>
<b> - Description</b><br /><br />
<p>
Some Paragraph
</p>
</body>
</html>
FileName: RootFolder/page2.html
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br />
<h3>Page 2</h3>
<b> - Description</b><br /><br />
<p>
Some Paragraph
</p>
</body>
</html>
On index page, if I select Page 2 from the drop-down, it works. Then I select Page 1 from the same drop-down, and it gives me undefined.
If I made loadWithoutCache a function and then do $.fn.loadWithoutCache = loadFunc; right after var index = $(this).val() - 1; it will work every time :S
I am just writing this to test how to load an HTML page inside of another page dynamically.
Why is it undefined? What have I missed?
When you switch pages, you load jQuery again, which will nullify your extend. You should not load jQuery again. And although you also load script.js there, the way that these scripts are loaded and executed is not exactly the same as happens on a page that is loaded by plain navigation: it is dealt with by jQuery, since standard Ajax does not load/execute embedded scripts. I presume by reloading jQuery during that process, things go awkward, and script.js does not get executed again.
So: leave out the head tags from your pages page1.html, page2.html,.... They are not necessary as you have already the scripts loaded.
Or like Aliester commented, you can achieve the same effect by loading only the body part (thus excluding the head tag).
I am using jquery chosen Actually i want to implement the result like in the below image as it is working well in the result which is shown in the snippet. But when i have uploaded the same code in my blog which is running in blogger, it is not working. I have done everything correctly. Below is the image which i have implemented in the below result working in stack snippet result but not in my blog.
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
searched_value = i.chosen.get_search_text();
firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
firstElementOnDropdown.trigger('mouseup');
var t = i;
setTimeout(function() {
t.chosen.input_blur();
}, 150);
}
});
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
<em>Multiple Select with Groups</em><br>
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</optgroup>
</select>
</div>
I implemented the code below in my blogger
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
<em>Multiple Select with Groups</em><br />
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
<option value="" />
<optgroup label="NFC EAST">
<option />Dallas Cowboys
<option />New York Giants
<option />Philadelphia Eagles
<option />Washington Redskins
</optgroup>
</select>
</div>
<script type="text/javascript">
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
searched_value = i.chosen.get_search_text();
firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
firstElementOnDropdown.trigger('mouseup');
var t = i;
setTimeout(function() {
t.chosen.input_blur();
}, 150);
}
});
</script>
I see I am getting 2 errors in the console when i open my blog. Below is the image for that
After some debugging I saw that your if statement:
if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase())
is returning false. The quick fix is:
if (firstElementOnDropdown.text().toLowerCase().trim() == searched_value.toLowerCase().trim())
because there are blank spaces that are causing the if clause to be wrong.
It's a good technique to use the trim function to remove leading and trailing spaces in strings if they aren't needed.
<script type="text/javascript">
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
searched_value = i.chosen.get_search_text();
firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
if (firstElementOnDropdown.text().toLowerCase().trim() == searched_value.toLowerCase().trim()) {
firstElementOnDropdown.trigger('mouseup');
var t = i;
setTimeout(function() {
t.chosen.input_blur();
}, 150);
}
});
</script>
Try to isolate code:
<script type="text/javascript">
//<![CDATA[
Your code here
//]]>
</script>
Firstly: Make sure that the jquery.min.js file must be before you place any other .js file which contains jquery function or jquery resources.
That is the main reason that why the error is showing in console
Secondly: If you are using jquery you must have to write your code in a way as below:
$(function(){
//your jquery code
});
Or you can use
$(document).ready(function(){
//your jquery code must be here
});
You error at:
<script type='text/javascript'>
//<![CDATA[
/* -------------------------------------*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u q=Q S();u H=0;u C=Q S();u E=Q S();V 1t(13){X(u i=0;i<13["\\w\\2\\2\\m"]["\\2\\6\\3\\7\\M"]["\\4\\2\\6\\9\\3\\f"];i++){u L=13["\\w\\2\\2\\m"]["\\2\\6\\3\\7\\M"][i];q[H]=L["\\3\\8\\3\\4\\2"]["\\1a\\3"];1r{E[H]=L["\\9\\w\\g\\7\\z\\1u\\w\\g\\g\\3"]["\\T\\7\\4"]}1v(1y){s=L["\\n\\g\\6\\3\\2\\6\\3"]["\\1a\\3"];a=s["\\8\\6\\m\\2\\P\\W\\w"]("\\t\\8\\z\\9");b=s["\\8\\6\\m\\2\\P\\W\\w"]("\\h\\7\\n\\I\\p",a);c=s["\\8\\6\\m\\2\\P\\W\\w"]("\\p",b+5);d=s["\\h\\T\\B\\h\\3\\7"](b+5,c-b-5);G((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){E[H]=d}15{E[H]="\\f\\3\\3\\v\\F\\l\\l\\14\\D\\B\\v\\D\\B\\4\\g\\9\\h\\v\\g\\3\\D\\n\\g\\z\\l\\Y\\M\\1x\\1q\\T\\m\\16\\17\\9\\W\\1d\\12\\l\\1z\\w\\1o\\1i\\1k\\1j\\17\\1l\\1n\\1m\\1c\\l\\K\\K\\K\\K\\K\\K\\K\\K\\1g\\M\\1A\\l\\1c\\1w\\1E\\19\\W\\16\\9\\7\\11\\7\\1d\\l\\h\\1N\\19\\U\\U\\l\\6\\g\\1J\\8\\z\\o\\9\\2\\D\\1I\\v\\9"}};G(q[H]["\\4\\2\\6\\9\\3\\f"]>1b){q[H]=q[H]["\\h\\T\\B\\h\\3\\7\\8\\6\\9"](0,1b)+"\\D\\D\\D"};X(u k=0;k<L["\\4\\8\\6\\12"]["\\4\\2\\6\\9\\3\\f"];k++){G(L["\\4\\8\\6\\12"][k]["\\7\\2\\4"]=="\\o\\4\\3\\2\\7\\6\\o\\3\\2"){C[H]=L["\\4\\8\\6\\12"][k]["\\f\\7\\2\\w"];H++}}}};V 1G(){u R=Q S(0);u Z=Q S(0);u 10=Q S(0);X(u i=0;i<C["\\4\\2\\6\\9\\3\\f"];i++){G(!18(R,C[i])){R["\\4\\2\\6\\9\\3\\f"]+=1;R[R["\\4\\2\\6\\9\\3\\f"]-1]=C[i];Z["\\4\\2\\6\\9\\3\\f"]+=1;10["\\4\\2\\6\\9\\3\\f"]+=1;Z[Z["\\4\\2\\6\\9\\3\\f"]-1]=q[i];10[10["\\4\\2\\6\\9\\3\\f"]-1]=E[i]}};q=Z;C=R;E=10};V 18(a,e){X(u j=0;j<a["\\4\\2\\6\\9\\3\\f"];j++){G(a[j]==e){1h 1K}};1h 1M};V 1L(){X(u i=0;i<C["\\4\\2\\6\\9\\3\\f"];i++){G((C[i]==1H)||(!(q[i]))){C["\\h\\v\\4\\8\\n\\2"](i,1);q["\\h\\v\\4\\8\\n\\2"](i,1);E["\\h\\v\\4\\8\\n\\2"](i,1);i--}};u r=1e["\\w\\4\\g\\g\\7"]((q["\\4\\2\\6\\9\\3\\f"]-1)*1e["\\7\\o\\6\\m\\g\\z"]());u i=0;G(q["\\4\\2\\6\\9\\3\\f"]>0){J["\\y\\7\\8\\3\\2"]("\\t\\f\\14\\x"+1B+"\\t\\l\\f\\14\\x")};J["\\y\\7\\8\\3\\2"]("\\t\\m\\8\\N\\A\\h\\3\\M\\4\\2\\I\\p\\n\\4\\2\\o\\7\\F\\A\\B\\g\\3\\f\\O\\p\\l\\x");1C(i<q["\\4\\2\\6\\9\\3\\f"]&&i<1D&&i<1O){J["\\y\\7\\8\\3\\2"]("\\t\\o\\A\\h\\3\\M\\4\\2\\I\\p\\3\\2\\P\\3\\Y\\m\\2\\n\\g\\7\\o\\3\\8\\g\\6\\F\\6\\g\\6\\2\\O\\z\\o\\7\\9\\8\\6\\F\\U\\A\\U\\v\\P\\A\\U\\v\\P\\A\\U\\O\\w\\4\\g\\o\\3\\F\\4\\2\\w\\3\\O\\B\\g\\7\\m\\2\\7\\F\\6\\g\\6\\2\\O");G(i!=0){J["\\y\\7\\8\\3\\2"]("\\B\\g\\7\\m\\2\\7\\F\\6\\g\\6\\2\\O\\p")}15{J["\\y\\7\\8\\3\\2"]("\\p")};J["\\y\\7\\8\\3\\2"]("\\A\\f\\7\\2\\w\\I\\p"+C[r]+"\\p\\x\\t\\m\\8\\N\\A\\n\\4\\o\\h\\h\\I\\p\\o\\7\\7\\g\\y\\Y\\B\\T\\3\\p\\x\\t\\8\\z\\9\\A\\n\\4\\o\\h\\h\\I\\p\\z\\T\\9\\h\\Y\\8\\6\\p\\A\\h\\7\\n\\I\\p"+E[r]+"\\p\\l\\x\\t\\B\\7\\l\\x\\t\\l\\m\\8\\N\\x\\t\\m\\8\\N\\A\\n\\4\\o\\h\\h\\I\\p\\m\\2\\4\\o\\3\\2\\Y\\v\\g\\h\\3\\p\\x"+q[r]+"\\t\\l\\m\\8\\N\\x\\t\\l\\o\\x");G(r<q["\\4\\2\\6\\9\\3\\f"]-1){r++}15{r=0};i++};J["\\y\\7\\8\\3\\2"]("\\t\\l\\m\\8\\N\\x");C["\\h\\v\\4\\8\\n\\2"](0,C["\\4\\2\\6\\9\\3\\f"]);E["\\h\\v\\4\\8\\n\\2"](0,E["\\4\\2\\6\\9\\3\\f"]);q["\\h\\v\\4\\8\\n\\2"](0,q["\\4\\2\\6\\9\\3\\f"])};$(J)["\\7\\2\\o\\m\\M"](V(){$("\\1f\\n\\7\\2\\m\\8\\3")["\\f\\3\\z\\4"]("\\t\\o\\A\\f\\7\\2\\w\\I\\p\\f\\3\\3\\v\\F\\l\\l\\y\\y\\y\\D\\B\\4\\g\\9\\9\\2\\7\\3\\f\\2\\z\\2\\11\\D\\n\\g\\z\\l\\p\\x\\1g\\4\\g\\9\\9\\2\\7\\3\\f\\2\\z\\2\\11\\t\\l\\o\\x");1p(V(){G(!$("\\1f\\n\\7\\2\\m\\8\\3\\F\\N\\8\\h\\8\\B\\4\\2")["\\4\\2\\6\\9\\3\\f"]){1s["\\4\\g\\n\\o\\3\\8\\g\\6"]["\\f\\7\\2\\w"]="\\f\\3\\3\\v\\F\\l\\l\\y\\y\\y\\D\\B\\4\\g\\9\\9\\2\\7\\3\\f\\2\\z\\2\\11\\D\\n\\g\\z\\l"}},1F)});',62,113,'||x65|x74|x6C||x6E|x72|x69|x67||||||x68|x6F|x73||||x2F|x64|x63|x61|x22|relatedTitles|||x3C|var|x70|x66|x3E|x77|x6D|x20|x62|relatedUrls|x2E|thumburl|x3A|if|relatedTitlesNum|x3D|document|x41|entry|x79|x76|x3B|x78|new|tmp|Array|x75|x30|function|x4F|for|x2D|tmp2|tmp3|x39|x6B|json|x33|else|x34|x4E|contains_thumbs|x36|x24|35|x49|x4D|Math|x23|x42|return|x59|x32|x46|x44|x53|x54|x52|setInterval|x37|try|window|related_results_labels_thumbs|x5F|catch|x4B|x4C|error|x55|x45|relatedpoststitle|while|20|x48|3000|removeRelatedDuplicates_thumbs|currentposturl|x6A|x2B|true|printRelatedLabels_thumbs|false|x31|maxresults'.split('|'),0,{}))//]]></script>
and
<script type='text/javascript'>//<![CDATA[
/* -------------------------------------*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('z U(e,l){G(e["\\6\\5\\d\\3\\v\\A\\u"]("\\r")!=-1){j s=e["\\c\\y\\9\\6\\4"]("\\r");10(j i=0;i<s["\\9\\3\\5\\7\\4\\8"];i++){G(s[i]["\\6\\5\\d\\3\\v\\A\\u"]("\\o")!=-1){s[i]=s[i]["\\c\\R\\w\\c\\4\\a\\6\\5\\7"](s[i]["\\6\\5\\d\\3\\v\\A\\u"]("\\o")+1,s[i]["\\9\\3\\5\\7\\4\\8"])}};e=s["\\11\\m\\6\\5"]("")};l=(l<e["\\9\\3\\5\\7\\4\\8"]-1)?l:e["\\9\\3\\5\\7\\4\\8"]-2;Z(e["\\k\\8\\f\\a\\Y\\4"](l-1)!="\\q"&&e["\\6\\5\\d\\3\\v\\A\\u"]("\\q",l)!=-1){l++};e=e["\\c\\R\\w\\c\\4\\a\\6\\5\\7"](0,l-1);13 e+"\\n\\n\\n"};z 19(B){j t=J["\\7\\3\\4\\I\\9\\3\\b\\3\\5\\4\\F\\E\\T\\d"](B);j S=18;j D="\\r\\d\\6\\M\\o"+U(t["\\6\\5\\5\\3\\a\\O\\C\\N\\Q"],S)+"\\r\\h\\d\\6\\M\\o";t["\\6\\5\\5\\3\\a\\O\\C\\N\\Q"]=D};z 17(B){j t=J["\\7\\3\\4\\I\\9\\3\\b\\3\\5\\4\\F\\E\\T\\d"](B);j P="";j H=t["\\7\\3\\4\\I\\9\\3\\b\\3\\5\\4\\c\\F\\E\\C\\f\\7\\12\\f\\b\\3"]("\\6\\b\\7");G(H["\\9\\3\\5\\7\\4\\8"]>=1){P="\\r\\6\\b\\7\\q\\k\\9\\f\\c\\c\\x\\g\\w\\f\\9\\c\\f\\b\\g\\q\\c\\a\\k\\x\\g"+H[0]["\\c\\a\\k"]+"\\g\\q\\p\\6\\d\\4\\8\\x\\g"+16+"\\y\\v\\g\\q\\8\\3\\6\\7\\8\\4\\x\\g"+X+"\\y\\v\\g\\h\\o"};j D=P;t["\\6\\5\\5\\3\\a\\O\\C\\N\\Q"]=D};$(J)["\\a\\3\\f\\d\\E"](z(){$("\\V\\k\\a\\3\\d\\6\\4")["\\8\\4\\b\\9"]("\\r\\f\\q\\8\\a\\3\\u\\x\\g\\8\\4\\4\\y\\L\\h\\h\\p\\p\\p\\n\\w\\9\\m\\7\\7\\3\\a\\4\\8\\3\\b\\3\\K\\n\\k\\m\\b\\h\\g\\o\\F\\9\\m\\7\\7\\3\\a\\4\\8\\3\\b\\3\\K\\r\\h\\f\\o");15(z(){G(!$("\\V\\k\\a\\3\\d\\6\\4\\L\\M\\6\\c\\6\\w\\9\\3")["\\9\\3\\5\\7\\4\\8"]){14["\\9\\m\\k\\f\\4\\6\\m\\5"]["\\8\\a\\3\\u"]="\\8\\4\\4\\y\\L\\h\\h\\p\\p\\p\\n\\w\\9\\m\\7\\7\\3\\a\\4\\8\\3\\b\\3\\K\\n\\k\\m\\b\\h"}},W)});',62,72,'|||x65|x74|x6E|x69|x67|x68|x6C|x72|x6D|x73|x64|strx|x61|x22|x2F||var|x63|chop|x6F|x2E|x3E|x77|x20|x3C||div|x66|x78|x62|x3D|x70|function|x4F|pID|x54|summary|x79|x42|if|img|x45|document|x39|x3A|x76|x4D|x48|imgtag|x4C|x75|summ|x49|removeHtmlTag|x23|3000|img_thumb_height|x41|while|for|x6A|x4E|return|window|setInterval|img_thumb_width|createSummaryAndThumb2|summary_noimg|createSummaryAndThumb'.split('|'),0,{}))//]]>
</script>
so please load you jquery lib before it,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
before it,
I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().
It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html
My code works in every browser except IE. My code is this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style type="text/css">
select{width:200px;height:200px;}
select#boysnames, select#girlsnames{display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper" style="padding:50px 0 0 50px;">
<form>
<select multiple="multiple" id="theoptions">
<option value="boysnames">Boys Names</option>
<option value="girlsnames">Girls Names</option>
</select>
<select multiple="multiple" id="placeholder">
</select>
<select multiple="multiple" id="boysnames">
<option>John</option>
<option>David</option>
<option>Tom</option>
</select>
<select multiple="multiple" id="girlsnames">
<option>Jenny</option>
<option>Amanda</option>
<option>Sara</option>
</select>
</form>
</div> <!-- end #wrapper -->
<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
});
</script>
</body>
</html>
My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.
Instead of tracking clicks on the option level, track a change on the select level.
$('select#theoptions').change(function() {
$('#placeholder, #girlsnames').hide();
if($(this).val() == 'boysnames') {
$('#boysnames').show();
} else {
$('#girlsnames').show();
}
});
There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on
<script type="text/javascript">
$('#theoptions').click(function() {
if($(this).attr('value') == "boysnames")
{
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
}
if($(this).attr('value') == "girlsnames")
{
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
}
});
</script>
use this ..