Reputation: 118
I have a dropdown list of categories with id's and a name.
My jquery's purpose is to iterate over the category id's in the list, if it does not find the category id it will take that 'option' and prepend its text with 4 spaces. for some reason it is prepending all of them with raw text instead of the selected with the rendered html. thanks in advance if you can figure it out.
here is the jquery
var parentCat = [ 1,2,3,4,5,6,7,8,9,10,11 ];
$('#category option').each(function() {
var cat = $(this).val();
// console.log(cat);
if($.inArray( cat, parentCat ) === -1) {
var catName = $(this).text();
console.log(catName);
$(this).prepend(document.createTextNode(" "));
}
});
here is the html dropdown select list
<select class="form-control input-md" id="category" name="category"
required="required">
<option value="default">
Please Select a Category
</option>
<option value="1">
3D Printing
</option>
<option value="14">
3D Printer Accessories
</option>
<option value="15">
3D Printer Extruders
</option>
<option value="16">
3D Printer Parts
</option>
<option value="17">
3D Printers
</option>
<option value="18">
3D Printing Tests
</option>
<option value="2">
Art
</option>
<option value="19">
2D Art
</option>
<option value="20">
Art Tools
</option>
<option value="21">
Coins & Badges
</option>
<option value="22">
Interactive Art
</option>
<option value="23">
Math Art
</option>
<option value="24">
Scans & Replicas
</option>
<option value="25">
Sculptures
</option>
<option value="26">
Signs & Logos
</option>
<option value="3">
Fashion
</option>
<option value="27">
Accessories
</option>
<option value="28">
Bracelets
</option>
<option value="29">
Costume
</option>
<option value="30">
Earrings
</option>
<option value="31">
Glasses
</option>
<option value="32">
Jewelry
</option>
<option value="33">
Keychains
</option>
<option value="34">
Rings
</option>
<option value="4">
Gadgets
</option>
<option value="35">
Audio
</option>
<option value="36">
Camera
</option>
<option value="37">
Computer
</option>
<option value="38">
Mobile Phone
</option>
<option value="39">
Tablet
</option>
<option value="40">
Video Games
</option>
<option value="5">
Hobby
</option>
<option value="41">
Automotive
</option>
<option value="42">
DIY
</option>
<option value="43">
Electronics
</option>
<option value="44">
Music
</option>
<option value="45">
R/C Vehicles
</option>
<option value="46">
Robotics
</option>
<option value="47">
Sport & Outdoors
</option>
<option value="6">
Household
</option>
<option value="48">
Bathroom
</option>
<option value="49">
Containers
</option>
<option value="50">
Decor
</option>
<option value="51">
Household Supplies
</option>
<option value="52">
Kitchen & Dining
</option>
<option value="53">
Office
</option>
<option value="54">
Organization
</option>
<option value="55">
Outdoor & Garden
</option>
<option value="56">
Pets
</option>
<option value="57">
Replacement Parts
</option>
<option value="7">
Learning
</option>
<option value="58">
Biology
</option>
<option value="59">
Engineering
</option>
<option value="60">
Math
</option>
<option value="61">
Physics & Astronomy
</option>
<option value="8">
Models
</option>
<option value="62">
Animals
</option>
<option value="63">
Buildings & Structures
</option>
<option value="64">
Creatures
</option>
<option value="65">
Food & Drink
</option>
<option value="66">
Model Furniture
</option>
<option value="67">
Model Robots
</option>
<option value="68">
People
</option>
<option value="69">
Props
</option>
<option value="70">
Vehicles
</option>
<option value="9">
Tools
</option>
<option value="71">
Hand Tools
</option>
<option value="72">
Machine Tools
</option>
<option value="73">
Parts
</option>
<option value="74">
Tool Holders & Boxes
</option>
<option value="10">
Toys & Games
</option>
<option value="75">
Chess
</option>
<option value="76">
Construction Toys
</option>
<option value="77">
Dice
</option>
<option value="78">
Games
</option>
<option value="79">
Mechanical Toys
</option>
<option value="80">
Playsets
</option>
<option value="81">
Puzzles
</option>
<option value="82">
Toy & Game Accessories
</option>
<option value="11">
Other
</option>
</select>
Trying to get it to look like this http://snag.gy/IplgB.jpg
Working code
var parentCat = [ 1,2,3,4,5,6,7,8,9,10,11 ];
$('#category option').each(function() {
var cat = parseInt($(this).val());
console.log(cat);
if($.inArray( cat, parentCat ) === -1 && !isNaN(cat)) {
$(this).prepend(' ')
}
});
Upvotes: 0
Views: 52
Reputation: 484
Try replacing the following line
var cat = $(this).val();
with
var cat = parseInt($(this).val());
the problem is with the comparison.. $(this).val()
returns a string that is being compared with an array of numbers..
Upvotes: 1