Can I get onclick to fire on option element in chrome and safari?

JavaScript
1

Hello, 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" />&nbsp;Ruddy<br/>
<input type="checkbox" value="garrido" />&nbsp;Garrido<br/>
<input type="checkbox" value="bennett" />&nbsp;Bennett<br/>
<input type="checkbox" value="johnson" />&nbsp;Johnson<br/>
<input type="checkbox" value="pilkington" />&nbsp;Pilkington<br/>
<input type="checkbox" value="wolfswinkle" />&nbsp;Wolfswinkle<br/>
<input type="checkbox" value="hooper" />&nbsp;Hooper<br/>
<input type="checkbox" value="fer" />&nbsp;Fer<br/>
<input type="checkbox" value="snodgrass" />&nbsp;Snodgrass<br/>
<input type="checkbox" value="martin" />&nbsp;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>
2

Hey amelio,

One way you could use to get around this issue is by not using a <select> list for the options, but instead using a list of items where you can monitor the click event. Perhaps a set of buttons.

I’ve taken your fiddle and added buttons to it (and changed the JS a little to match)

Then I figured, perhaps you wanted the dropdown list feel, so I added some styling to make it look like a ddl

Hope this helps :slight_smile:

3

That’s great, Thank You AussieJohn and one of the benefits doing it this way is it allows complete freedom on styling. Another thing I notice is if a user wanted to keep pressing random then they wouldn’t have to keep getting the dropdown to show. In your example they could just keep clicking.

I really appreciate the time you’ve taken to help me I will certainly use this.