I have two drop down select option menus being populated with json data via api call. I want to add the "Select" option as the first option which will have no value. Is there a way I can accomplish this in my view or in handlebars? I have tried the unshift method, but I can't seem to get the collection to successfully add the new option. Here is my code:
var productsMenuView = new Thorax.View({
template: Handlebars.compile($('#products-template').html()),
collection: new Thorax.Collection(
[{
id: selectMenu.id,
name: selectMenu.name
}]
),
initialize: function() {
this.collection.fetch({url: 'products.json'});
myString = this.collection;
obj = myString.unshift({id: "0", name: "Select"});
console.log(myString);
return obj;
}
});
Here is the Handlebars template:
<script id="products-template" type="text/x-handlebars-template">
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
<option value="{{name}}">{{name}}</option>
{{/collection}}
</script>
My menu displays this list of options:
<select id="productSelect" class="modelSearchMenus" data-view-cid="view21" data-view-helper="collection" data-collection-element="true" data-collection-cid="collection7">
<option value="Audio equipment" data-model-cid="c35">Audio equipment</option>
<option value="Cooktop" data-model-cid="c36">Cooktop</option>
<option value="Drill" data-model-cid="c37">Drill</option>
<option value="Fan" data-model-cid="c38">Fan</option>
<option value="Garbage disposal" data-model-cid="c39">Garbage disposal</option>
<option value="Microwave" data-model-cid="c40">Microwave</option>
<option value="Pruner" data-model-cid="c41">Pruner</option>
<option value="Range" data-model-cid="c42">Range</option>
<option value="Ratchet/nut driver" data-model-cid="c43">Ratchet/nut driver</option>
<option value="Vacuum" data-model-cid="c44">Vacuum</option>
<option value="Wall oven" data-model-cid="c45">Wall oven</option>
This is what I want the menu to display:
<select id="productSelect" class="modelSearchMenus" data-view-cid="view21" data-view-helper="collection" data-collection-element="true" data-collection-cid="collection7">
<option value="">Select</option>
<option value="Audio equipment" data-model-cid="c35">Audio equipment</option>
<option value="Cooktop" data-model-cid="c36">Cooktop</option>
<option value="Drill" data-model-cid="c37">Drill</option>
<option value="Fan" data-model-cid="c38">Fan</option>
<option value="Garbage disposal" data-model-cid="c39">Garbage disposal</option>
<option value="Microwave" data-model-cid="c40">Microwave</option>
<option value="Pruner" data-model-cid="c41">Pruner</option>
<option value="Range" data-model-cid="c42">Range</option>
<option value="Ratchet/nut driver" data-model-cid="c43">Ratchet/nut driver</option>
<option value="Vacuum" data-model-cid="c44">Vacuum</option>
<option value="Wall oven" data-model-cid="c45">Wall oven</option>
What am I doing wrong?
I'd just unshift another element into the collection if you can.
collection.fetch({
success: function(collection) {
collection.unshift(new Thorax.Model({name: 'Select'}));
}
});
Ideally you could have an id to set the `" but if not you can add an if statement like:
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
<option value="{{#if name === 'Select'}}{{else}}{{name}}{{/if}}">{{name}}</option>
{{/collection}}
Adding it to your template would probably be the easiest way of accomplishing this:
<script id="products-template" type="text/x-handlebars-template">
<option value="">Select</option>
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
<option value="{{name}}">{{name}}</option>
{{/collection}}
</script>
Related
I want to get the information below the first <option> tag, I want to use jQuery/Cheerio to extract the information and transform the end result into a dictionary. It would ideally look like this
const info = {
'5.5':12773,
'6':12774,
}
And it goes on till the end.
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Well, if you want to do all of this in jQuery, you can simply get all of the options of a select element with the jQuery selector ($('#attributesize-size_uswomen option')) and then perform a for loop ($.each) over it and fill your object easily.
So your final code should be something like this:
var opts = $('#attributesize-size_uswomen option:not(:first)');
var info = {};
$.each(opts, function(index, opt) {
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
NOTE: Since the opt itself in the loop will be a regular object to use the jQuery functions over it you need to make a jQuery object with $() operand otherwise you can use it as regular NODE object and get its properties with javascript built-in properties like text, textContent or value.
UPDATE
Since you receive an error in the implementation with cheerio which does not support :first pseudo-selector, so you can select all of the options then exclude the first one in the object creation.
var opts = $('#attributesize-size_uswomen option');
var info = {};
$.each(opts, function(index, opt) {
if (index != 0)
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Or if you want to keep up with the supported Cheerio approach you use this one:
var info = {};
$('#attributesize-size_uswomen').children().slice(1).each(function() {
info[$(this).text()] = parseInt($(this).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Achieved using $("select option:not(:first)").each
CodePen
I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I don't know how to make next:
I want that when someone selects items from combobox, that item be shown in div.
What do I need to do?
<body>
<h1>VEZBA STRUKTURA</h1>
<div id="prvi"></div>
<select name="automobili" id="automobili">
<option value="1">BMW</option>
<option value="2">AUDI</option>
<option value="3">OPEL</option>
<option value="4">FERARI</option>
<option value="5">SKODA</option>
<option value="6">HJUNDAI</option>
</select>
<script>
</script>
</body>
You need to attach an event listener that executes when the value of the select changes:
automobili.addEventListener('change', function() {
prvi.innerHTML = automobili.selectedOptions[0].textContent
})
<h1>VEZBA STRUKTURA</h1>
<div id="prvi"></div>
<select name="automobili" id="automobili">
<option value="1">BMW</option>
<option value="2">AUDI</option>
<option value="3">OPEL</option>
<option value="4">FERARI</option>
<option value="5">SKODA</option>
<option value="6">HJUNDAI</option>
</select>
I have a main drop down list which contains state names, when i select each state name i need to display the city names in a select box, but the select box name should be same because when i give different select box with same name the data is not storing in sql database. so i need to load the specific city names on each state select. any option
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
<option value="City2"> City2</option>
<option value="City3"> City3</option>
<option value="City3"> City3</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
</select>
Demo
You can use prop('disabled', true / false); to manage which city to choose. You should not have 2 selects with same name, so because you need them in sql I made a fix for it. Notice also in your post you miss first <select> and "City 3" comes up 2 times.
html
<select name="state" id="sel_state">
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
<option value="">Select Site</option>
<option value="City1">City1</option>
<option value="City2">City2</option>
<option value="City3">City3</option>
<option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
<option value="">Select Site</option>
<option value="City1">City1</option>
</select>
jQuery
$(function () {
$("#sel_state").change(function () {
var a = $("#sel_state option:selected").text();
if (a == 'CHENNAI') {
$('#GURGAON').prop('disabled', true);
$('#CHENNAI').prop('disabled', false);
$('#GURGAON').prop('name', 'site_ignored');
$('#CHENNAI').prop('name', 'site');
}
if (a == 'GURGAON') {
$('#CHENNAI').prop('disabled', true);
$('#GURGAON').prop('disabled', false);
$('#GURGAON').prop('name', 'site');
$('#CHENNAI').prop('name', 'site_ignored');
}
});
});
I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.