Output is not my ideal thing.I wanna make drill down buttons.
Now output is
index.html is
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">
</head>
<body>
<select data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
</body>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
</html>
I wanna make only 2 drill down buttons in index.html .And if I select A in first button,a-1~4 is shown in second button.If I select B in first button,b-1~5 is shown in second button.If I select C in first button,c-1~2 is shown in second button・・・・.
So output now is different form my ideal one.I use Chosen in jQuery plugin. Why can't I do my ideal this? What is wrong? Why can't I filter to second button?
Hope this helps..
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">-->
</head>
<body>
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
<script type="text/javascript">
// $(".chzn-select").chosen();
// $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function () {
$('#mainDD').on('change', function() {
console.log($(this).val());
console.log($('#mainDD :selected').text()) ;
var thisType = "type" + $(this).val();
for(i=1; i<5; i++) {
var thisId = "type" + i;
console.log(thisType + " " + thisId);
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
})
});
</script>
</body>
</html>
Related
$(document).ready(function () {
$("#block_1").change((e) => {
console.log("block_1 select ", e.target.value);
$("#children_1")
// .find("[value!='" + e.target.value + "']")
.find("option")
.removeAttr("selected");
$("#children_1")
.find("[value='" + e.target.value + "']")
.attr("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="padding: 50px;">
<select id="block_1">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<div id="children_1" for="1" style="padding: 10px 50px;">
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select>
<option value=""></option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<hr />
</body>
</html>
My purpose is to select child select boxes indirectly by selecting a parent select boxes.
But now, it works once for every option, and don't work anymore when I select the same option again.
I hope to fix this, but not sure what was wrong in my code.
Typically, attributes are used for setting the initial value of an element's property, so repeatedly changing an attribute will not always have the intended effect.
Instead, use .prop('selected', true) or .prop('selected', false)
$(document).ready(function () {
$("#block_1").change((e) => {
console.log("block_1 select ", e.target.value);
$("#children_1")
// .find("[value!='" + e.target.value + "']")
.find("option")
.prop("selected", false);
$("#children_1")
.find("[value='" + e.target.value + "']")
.prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body style="padding: 50px;">
<select id="block_1">
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
<div id="children_1" for="1" style="padding: 10px 50px;">
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select>
<option value=""></option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<select>
<option value=""></option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
<hr />
</body>
</html>
I'm trying to make 3 tier chain select from this link http://www.appelsiini.net/projects/chained
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model" name="model">
<option value="">--</option>
<option value="coupe" class="series-3 series-6 a5">Coupe</option>
<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
<option value="sportback" class="a3 a5">Sportback</option>
</select>
<script language="JavaScript" type="text/javascript">
var $ = jQuery.noConflict();
jQuery(document).ready(function($) {
/* For $.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");
return;
/* Show button after each pulldown has a value. */
$("#engine").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
$("#button").fadeIn();
} else {
$("#button").hide();
}
})
});
</script>
</html>
When I run this code, I got an issue the dropdown couldn't chain and show an error message TypeError: Cannot read property 'fn' of undefined. So how to solving this problem? Thanks
You missed the close tag of first <script>.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Other wise your code working fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model" name="model">
<option value="">--</option>
<option value="coupe" class="series-3 series-6 a5">Coupe</option>
<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
<option value="sportback" class="a3 a5">Sportback</option>
</select>
<script language="JavaScript" type="text/javascript">
var $ = jQuery.noConflict();
jQuery(document).ready(function($) {
/* For $.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");
return;
/* Show button after each pulldown has a value. */
$("#engine").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
$("#button").fadeIn();
} else {
$("#button").hide();
}
})
});
</script>
</html>
Close the script tag for the jquery include. Everything will work as expected.
Change
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
to
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.4" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.remote.js?v=0.9.4" charset="utf-8"></script>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model" name="model">
<option value="">--</option>
<option value="coupe" class="series-3 series-6 a5">Coupe</option>
<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
<option value="sportback" class="a3 a5">Sportback</option>
</select>
<script language="JavaScript" type="text/javascript">
var $ = jQuery.noConflict();
jQuery(document).ready(function($) {
/* For $.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");
return;
/* Show button after each pulldown has a value. */
$("#engine").bind("change", function(event) {
if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) {
$("#button").fadeIn();
} else {
$("#button").hide();
}
})
});
</script>
</html>
I am using Shopify, but in case you haven't used it, my question should be able to be answered in javascript, it just would be nice if you have Shopify knowledge.
I have a select with options. Whenever an option is selected, I want that option to be displayed. It would need to be constantly be updated depending on what the user selects. I am not sure how to achieve this with javascript.
<select name="car" id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="color" id="select-one">
<option value="volvo">Red</option>
<option value="saab">Oj</option>
<option value="mercedes">Purp</option>
<option value="audi">Black</option>
</select>
<div class="show">
Here is the option you selected, with the Color:
"Car" "Color"
</div>
First of all don't duplicate the id in both select-box. Secondly you can use onchange event of javascript like this:
<select name="car" class="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="color" class="color">
<option value="volvo">Red</option>
<option value="saab">Oj</option>
<option value="mercedes">Purp</option>
<option value="audi">Black</option>
</select>
<div class="show">
Here is the option you selected, with the Color:
"<div id="selected_car">Car</div>" "<div id="selected_color">Color</div>"
</div>
<script>
$('select').change(function(){
if($(this).hasClass('car')){
$('#selected_car').html("");
$('#selected_car').html($('option:selected',this).text());
}else{
$('#selected_color').html("");
$('#selected_color').text($('option:selected',this).text());
}
});
</script>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
szData = " Here is the option you selected, with the Color: " + $('#select').val() + '---' + $('#select-one option:selected').text();
$('div.show').html(szData)
});
});
</script>
</head>
<body>
<div class="show">
Here is the option you selected, with the Color:
"Car" "Color"
</div>
<select name="car" id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="color" id="select-one">
<option value="volvo">Red</option>
<option value="saab">Oj</option>
<option value="mercedes">Purp</option>
<option value="audi">Black</option>
</select>
</body>
</html>
I'm getting an undefined error in IE11 when I try to execute the following Javascript: alert('obj: ' + document.payment_method.elements['285_id[35]']);
Non array notation form names seem to work fine. Here some test in js fiddle: http://jsfiddle.net/o2d2c16r/2/
<html>
<head>
</head>
<body>
<form name="payment_method">
<select name="285_id[35]">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
<input type="text" name="mytext" value="text entered" />
<select name="myselect">
<option value="a">value a</option>
<option value="b">value b</option>
<option value="c">value c</option>
<option value="d">value d</option>
</select>
</form>
<script>
alert('obj: ' + document.payment_method.elements['285_id[35]']);
alert('obj: ' + document.payment_method.elements['mytext']);
alert('obj: ' + document.payment_method.elements['myselect']);
alert('obj length: ' + document.payment_method.elements['myselect'].length);
</script>
</body>
</html>
Any help would be appreciated!
Thanks,
Gunter
I am trying to create a select box that shows all Twitter Bootstrap Icons with its text. Therefore I am using the Bootstrap-Select Plugin. One of the images shows up in the list, but the rest is somehow hidden.
What do I have to change in order to get the list of all listed icons with its text?
JS:
<script src="source/bootstrap_select/bootstrap-select.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.selectpicker').selectpicker('');
});
</script>
HTML:
<select class="selectpicker">
<option data-icon="icon-search">icon-search</option>
<option data-icon="icon-envelope">icon-envelope</option>
<option data-icon="icon-heart" selected="selected">icon-heart</option>
<option data-icon="icon-star">icon-star</option>
<option data-icon="icon-star-empty">icon-star-empty</option>
<option data-icon="icon-user">icon-user</option>
<option data-icon="icon-film">icon-film</option>
<option data-icon="icon-th-large">icon-th-large</option>
<option data-icon="icon-th">icon-th</option>
<option data-icon="icon-th-list">icon-th-list</option>
<option data-icon="icon-ok">icon-ok</option>
<option data-icon="icon-remove">icon-remove</option>
<option data-icon="icon-zoom-in">icon-zoom-in</option>
<option data-icon="icon-zoom-out">icon-zoom-out</option>
<option data-icon="icon-off">icon-off</option>
<option data-icon="icon-signal">icon-signal</option>
<option data-icon="icon-cog">icon-cog</option>
<option data-icon="icon-trash">icon-trash</option>
<option data-icon="icon-home">icon-home</option>
<option data-icon="icon-file">icon-file</option>
<option data-icon="icon-time">icon-time</option>
<option data-icon="icon-road">icon-road</option>
<option data-icon="icon-download-alt">icon-download-alt</option>
<option data-icon="icon-download">icon-download</option>
<option data-icon="icon-upload">icon-upload</option>
<option data-icon="icon-inbox">icon-inbox</option>
<option data-icon="icon-play-circle">icon-play-circle</option>
<option data-icon="icon-repeat">icon-repeat</option>
<option data-icon="icon-refresh">icon-refresh</option>
<option data-icon="icon-list-alt">icon-list-alt</option>
<option data-icon="icon-lock">icon-lock</option>
<option data-icon="icon-flag">icon-flag</option>
<option data-icon="icon-headphones">icon-headphones</option>
<option data-icon="icon-glass">icon-glass</option>
<option data-icon="icon-music">icon-music</option>
</select>
<link href="source/bootstrap_select/bootstrap-select.css" media="screen" rel="stylesheet" type="text/css" />
was missing!