Replace <options> with .html()

Replace <options> with .html()

Hello,

I have the following problem. I would like to renew the options in a form per AJAX. Therefore I wrap a <div> around these options and get the new options out of another file.
All is working well until the line "alert(result);".
The next line "$("#options").html(result);" doesn't work. Could you tell me why this is the case?

  1. <!doctype html>
    <html lang="de">
      <head>
        <meta charset="utf-8">
        <title>Fill Div-region Options füllen</title>
        <script type="text/javascript" src="scr/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#fill_div').on('click',function(){
                    $.get('test_ajax_options_source.html',function(result){
                        alert (result);
                        $("#options").html(result);               
                    });
                });
            });
        </script>
      </head>
     
      <body>  
        <p>In the following form the div-region "options" should be replaced with the values from ajax_options_source.</p>
        <p><button id="fill_div">Fill div</button></p>
        <form action="test_ajax_options_auswertung.php">
            <select>
                <div id="options">
                    <option>old option 1</option>
                    <option>old option 2</option>
                </div>
            </select>
            <br /><button type="submit">Send</button>
        </form
      </body>
    </html>


The file "test_ajax_options_source.html": 

  1. <option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>

Please excuse my mistakes - I am a newbie in jQuery and not a native english speaker.