SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.



    Code:
        <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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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)
    http://jsfiddle.net/GeekyJohn/4gEFh/9/

    Then I figured, perhaps you wanted the dropdown list feel, so I added some styling to make it look like a ddl
    http://jsfiddle.net/GeekyJohn/4gEFh/10/

    Hope this helps
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •