jquery mobile select работает в скрипте, а не в песочнице

Question

У меня есть this fiddle (благодаря пользователю, названному один раз), который ведет себя красиво: вы выбираете один вариант в раскрывающемся списке, и он показывает столбец таблицы, соответствующий этой опции, и скрывает три других ,

HTML

</div> 
<!-- /header --> 
<div data-role='content'> 
    <table class='mytable'> 
     <caption style='text-align: left;'>Table A</caption> 
     <thead> 
      <TR> 
       <TH align='left'>Type</TH> 
       <TH align='left'>Amount</TH> 
       <th colspan='4' scope='col'> 
        <label for='selmenu'></label> 
        <select id='selmenu' class='sel' data-native-menu='false' style='width: 100px'> 
         <option class='type1' value='type1'>type1</option> 
         <option class='type2' value='type2'>type2</option> 
         <option class='type3' value='type3'>type3</option> 
         <option class='type4' value='type4'>type4</option> 
        </select> 
      </TR> 
      <TR> 
       <TH align=l eft>Cars</TH> 
       <TD>5,000</TD> 
       <TD class='exhaust type1'>7000</TD> 
       <TD class='exhaust type2'>6000</TD> 
       <TD class='exhaust type3'>5000</TD> 
       <TD class='exhaust type4'>4000</TD> 
      </TR> 
      <TR> 
       <TH align=l eft>Trucks</TH> 
       <TD>45672</TD> 
       <TD class='exhaust type1'>154</TD> 
       <TD class='exhaust type2'>1.1</TD> 
       <TD class='exhaust type3'>3.7</TD> 
       <TD class='exhaust type4'>55.2</TD> 
      </TR> 
      <TR> 
      <TH align=l eft>Motorcycles</TH> 
      <TD>224455</TD> 
      <TD class='exhaust type1'>88</TD> 
      <TD class='exhaust type2'>99</TD> 
      <TD class='exhaust type3'>77</TD> 
      <TD class='exhaust type4'>55</TD> 
      </TR> 
    </TABLE> 
    <div data-role='footer'> 
     <h4>my footer</h4> 

    </div> 
    <!-- /footer --> 
</div> 

JS

$(document).ready(function() { 
$('.exhaust').hide(); 
$('.type1').show(); 

$('.sel').change(function() { 
    $('.exhaust').hide(); 
    $('.' + this.value).show(); 
    $('.sel').val(this.value); 
}); 
}); 

У меня есть то, что я думал, что идентично код в моей песочнице (идентичные HTML, идентичные JS), но, как вы можете увидеть

Поведение не то же самое.

Я задавался вопросом, было ли это положение JavaScript (ниже последнего «DIV» в HTML, но перемещая его вверх в голову не работает.

Любые мысли о том, что я делаю ? неправильно

Answer 1

проблемы «фиксированный». -. Я использую кавычки, потому что я не знаю, почему это должно работать

Я удалил все не применимую функцию Jquery из между тегами «сценарием», то есть я удалил jQuery, связанный с кнопками, радиосететом, datepicker. Я сохранил только это:

//tabs and the hide/show column function 
$(document).ready(function() { 
$('.exhaust').hide(); 
$('.type1').show(); 

$('.sel').change(function() { 
    $('.exhaust').hide(); 
    $('.' + this.value).show(); 
    $('.sel').val(this.value); 
}); 
}); 

Я действительно не понимаю, почему это должно сработать.