Jquery event on html select <option> tag


#1

i want to choose the font size for selected text from the div according to the selection of the drop-down.
while this works on a <button> tag, it doesn't work on an <option> from select tag.
why is that?

 <div  contenteditable="true" >type your text here</div>

                <button class="bold"><b>B</b></button>
                <button class="italic"><i>I</i></button>
                <button class="underl"><u>U</u></button>

                    <select>
                        <option class="fontSize1">xx-small</option>
                        <option class="fontSize2">x-small</option>
                        <option class="fontSize3" selected>small</option>
                        <option class="fontSize4">medium</option>
                        <option class="fontSize5">large</option>
                        <option class="fontSize6">x-large</option>
                        <option class="fontSize7">xx-large</option>
                    </select>

                <script>
                    $(document).ready(function () {
//buttons options
                        $('.bold').click(function () {
                            document.execCommand('bold');  
                        });
                        $('.italic').click(function () {
                            document.execCommand('italic');
                        });
                        $('.underl').click(function () {
                            document.execCommand('underline');
                        });
// select tag options
                        $('.fontSize1').click(function () {
                            document.execCommand('fontSize', false, '1');
                        });
                        $('.fontSize2').click(function () {
                            document.execCommand('fontSize', false, '2');
                        });
                        $('.fontSize3').click(function () {
                            document.execCommand('fontSize', false, '3');
                        });
                        $('.fontSize4').click(function () {
                            document.execCommand('fontSize', false, '4');
                        });
                        $('.fontSize5').click(function () {
                            document.execCommand('fontSize', false, '5');
                        });
                        $('.fontSize6').click(function () {
                            document.execCommand('fontSize', false, '6');
                        });
                        $('.fontSize7').click(function () {
                            document.execCommand('fontSize', false, '7');
                        });

  
                    });

                </script>

#2

well a dropdown is not exactly a click event, is it?

Maybe you should a change event?


#3

I saw this but couldn't understand how to make a different event for each option.

could you help with an example how to do this?


#4

it in there:

https://api.jquery.com/change/#entry-examples

I slightly modified it, you can find it here


#5

thanks a lot stetim94,
i have changed the code to what i need and now it works.
i will share it in case some one else find it useful.

 <div  contenteditable="true" >type your text here</div>

                <button class="bold"><b>B</b></button>
                <button class="italic"><i>I</i></button>
                <button class="underl"><u>U</u></button>

                    <select class="FontSize">
                        <option value="1">xx-small</option>
                        <option value="2">x-small</option>
                        <option value="3" selected="selected">small</option>
                        <option value="4">medium</option>
                        <option value="5">large</option>
                        <option value="6">x-large</option>
                        <option value="7">xx-large</option>
                    </select>

$( ".FontSize" ).change(function() {

  var x = $(".FontSize option:selected").attr('value');
  switch(x){
    case '1':
    document.execCommand('fontSize', false, '1');
      break;
        case '2':
    document.execCommand('fontSize', false, '2');
      break;  
    case '3':
    document.execCommand('fontSize', false, '3');
      break;
        case '4':
    document.execCommand('fontSize', false, '4');
      break; 
        case '5':
    document.execCommand('fontSize', false, '5');
      break;  
    case '6':
    document.execCommand('fontSize', false, '6');
      break;
        case '7':
    document.execCommand('fontSize', false, '7');
      break;       
  }
});

                        $('.bold').click(function () {
                            document.execCommand('bold');  
                        });
                        $('.italic').click(function () {
                            document.execCommand('italic');
                        });
                        $('.underl').click(function () {
                            document.execCommand('underline');
                        });

you could see a working example here:


#6

Hi,

Your code is Absolutely Right but there is a mistack on Click-event,
So, you need to visit
Jquery.

THANK YOU,
Divyesh Padamani


#7

yea, the mistake is to use a click event for <option>, but topic is resolved now?

Links to w3schools are not allowed, for good reason:

http://www.w3fools.com/
https://www.quora.com/Why-is-it-that-some-web-programmers-and-designers-do-not-recommend-W3Schools-to-use-as-a-reference-manual-and-what-are-some-alternatives