is there a workaround for onclick on option element not working in chrome

[amelio]

Hi, I have a select list, when a user chooses random_5, if they don't like the choice that is automatically made I would like them to be able to choose this option again. The problem is Chrome doesn't recognise .click on the option element on line 48 of the fiddle. It is well documented on this and other sites that you should use .change on the select element. The problem for me is, if a user chooses random_5 after having chosen it before there is no change and the event isn't fired.

 

I have a fiddle http://jsfiddle.net/4gEFh/2/

 

Any help greatly appreciated.

    <select id="sel_list">
        <option value="clear_all">Clear All</option>
        <option value="select_all">Select All</option>
        <option value="random_5">Random 5</option>
    </select>

<br/>
<br/>

<input type="checkbox" value="ruddy" /> Ruddy<br/>
<input type="checkbox" value="garrido" /> Garrido<br/>
<input type="checkbox" value="bennett" /> Bennett<br/>
<input type="checkbox" value="johnson" /> Johnson<br/>
<input type="checkbox" value="pilkington" /> Pilkington<br/>
<input type="checkbox" value="wolfswinkle" /> Wolfswinkle<br/>
<input type="checkbox" value="hooper" /> Hooper<br/>
<input type="checkbox" value="fer" /> Fer<br/>
<input type="checkbox" value="snodgrass" /> Snodgrass<br/>
<input type="checkbox" value="martin" /> Martin<br/>

<script>  
    $(document).ready(function(){
    $('#sel_list').change(function() {
            if ($(this).val() === 'clear_all') {
                $('input[type="checkbox"]:checked').removeAttr('checked');
            }
            if ($(this).val() === 'select_all') {
                $("input[type=checkbox]").prop('checked', true);
            }
        });
    });

    $(document).ready(function(){

        function getRandomArrayElements(arr, count) {
            var randoms = [], clone = arr.slice(0);
            for (var i = 0, index; i < count; ++i) {
                index = Math.floor(Math.random() * clone.length);
                randoms.push(clone[index]);
                clone[index] = clone.pop();
            }
            return randoms;
        }

        //Dummy array
        function createArray(c) {
            var ar = [];
            for (var i = 0; i < c; i++) {
                ar.push(i);
            }
            return ar;
        }

        //check random checkboxes
        function checkRandom(r, nodeList) {
            for (var i = 0; i < r.length; i++) {
                nodeList.get(r[i]).checked = true;
            }
        }

        //console.log(getRandomArrayElements(a, 10));
        $(function() {

            var chkCount = 10;
            //this can be changed

            var numberOfChecked = 5;

                $("option[value=random_5]").on('click',function(e) {

                var chks = $('input[type=checkbox]');

                chks.attr("checked", false);

                var a = createArray(chkCount);
                var r = getRandomArrayElements(a, numberOfChecked);

                checkRandom(r, chks);
            });

        });
    });        

</script>

 

[kicken]

I would say your best bet would probably be to switch to buttons instead of a select box. As far as I know there is not a way to recognize a click on an option element. If you want to keep the look of a select element, a little css and extra JS would let you turn separate buttons/divs into something visually resembling a select element while allowing you to capture clicks on individual "options".

[fastsol]

Looks like you need to add another if() in the $('#sel_list').change(function() for the value of random_5 and run the function to check the boxes.

[amelio]

Thanks kicken, I think that's what I might have to do. It's a real pain as to have someone click on the same option seems useful in some circumstances. It's very frustrating because it works fine as it is in ie and ff. I'm trying to think around the possibility that when any option in the selection list is clicked then returning the value of that option and if that value equals random_20 then firing the function. It still wouldn't work with .change because if the user was clicking the same option succesively then there is no change event.

 

Thank you also fastol, the problem with your solution is that we never fire the $('#sel_list').change(function() because if a user clicks the same option there is no change event.