Question

I’m using a plugin I made so I can have custom dropdown boxes (and have a consistent look across browsers). When you click a value in the custom box it changes the value in the hidden “real” select box. I’m running into issues when it comes to using the less than (<) and greater than (>) symbols. It works for all the other options that don’t have the special symbols in them. I’ve tried using the actual symbols, and I’ve tried using < and >

<ul class="selector">
            <li>Pounds</li>
            <li>&lt; 100</li>
            <li>101-120</li>
            <li>121-140</li>
            <li>141-160</li>
            <li>161-180</li>
            <li>181-200</li>
            <li>&gt; 200</li>
        </ul>
<select class="page1 fleft" id="weight" name="weight" style="visibility:hidden;">
        <option selected="selected" value="select">Pounds</option>
        <option value="&lt; 100">&lt; 100</option>
        <option value="101-120">101-120</option>
        <option value="121-140">121-140</option>
        <option value="141-160">141-160</option>
        <option value="161-180">161-180</option>
        <option value="181-200">181-200</option>
        <option value="&gt; 200">&gt; 200</option>
    </select>
 $("ul.selector li).click(function(){
    $(this).parent().next().val($(this).html());
  });

It’s a more complicated plugin and I just pulled out the part that pertains to this .. The tree traversal is all handled fine in the plugin (I just scribbled something out here that looks about right), the important thing is the value change. So, does anyone know why it won’t let me select any options with the less than or greater than symbols?

Answer 1

It works for me if instead of using html() you use text()

$("ul.selector li").click(function(){
    $(this).parent().next().val($(this).text());
});

jsFiddle demo