pegar valor do option que ta selecionado

quero pegar o valor de um select só que não consigo aparece como undefined, quando eu removo a div #myDropdown  eu consigo o resultado que quero mas com a div não consigo segue uma parte do código

	 

 <div id="myDropdown">

          <select id="demo-htmlselect" name="rank">

                  <option value="0" selected="selected" data-imagesrc="https://i.imgur.com/wMvJ3xf.png"

                   data-description="Rank 1 ">Rank 1</option>

                  <option value="1" data-imagesrc="https://i.imgur.com/6Vc4i1q.png"

                data-description="Rank 2">Rank 2</option>

          </select>

 </div>

  

  

 <script>

 function displayVals() {

                var val = $( "#demo-htmlselect" ).val();

                $( "p" ).html( "<b>Single:</b> " + val);

 }

  

 $( "select" ).change( displayVals );

 displayVals();

  

 </script>