将操作后的<div>的值返回给jQuery上的<select>/下拉列表元素

Question

这是HTML脚本

<div id="5">
<div class="niche">Click here to generate dropdownlist</div>
<div>

<div id="tests">This will change, but it won't when you change the dropdown list</div>

The jQuery

var theNiche;

$('.niche').click(function(){

    var theNiche = $(this).text();   
    var createSelect = $(document.createElement('select')).attr('id', 'sel-niche');
      createSelect.appendTo(this);
    $(this).replaceWith(createSelect);

var myOptions = {
      'Autos' : 'Autos',
      'Business' : 'Business',
      'Education' : 'Education',
      'Entertainment' : 'Entertainment',
      'Fashion' : 'Fashion',         
      'Food' : 'Food',
      'Health' : 'Health',
      'Home' : 'Home',
      'Insurance' : 'Insurance',
      'Gambling' : 'Gambling',
      'General' : 'General',
      'Music' : 'Music',
      'Real Estate' : 'Real Estate',
      'Sex' : 'Sex',
      'Shopping' : 'Shopping',
      'Sports' : 'Sports',
      'Technology' : 'Technology',
      'Travel' : 'Travel'
        };
        $.each(myOptions, function(val, thetext) {
            $('#sel-niche').append(
                $('<option></option>').attr('value',val).text(thetext)
            ); 
        });

        $('#sel-niche option[value="'+theNiche+'"]').attr('selected',true);
        $('#tests').html(theNiche);   
    });

var onChange = function(e){    
    $('#5 select').change(function(){
      alert($('#5 option:selected').text());
    }).change(onChange);
};

$('#5 select').change(onChange);

当我“单击此处生成下拉列表”时，div测试“id=”的文本将发生变化。但当显示下拉列表时，我尝试更改该值。div测试“id=”文本没有改变。

我的错误在哪里？

*这是我的第一篇帖子，很抱歉弄得一团糟

Answer 1

您正在使用“%5”作为ID。有效的ID不能以数字开头(或只是数字)。

把它改成一个名字(比如'five')，你的代码就可以工作了。