jQuery UI滑块不允许发布两个差异相同FORM上的滑块值？

问题描述

| 我在同一功能上使用了两个不同的滑块（也尝试了不同的功能） （请参阅下面的代码）在表单发布时，我仅获得一个滑块值，如何消除冲突？

$(function() {
        var t_select = $( \"#taste_val1\" );
        var slider = $( \"<div id=\'type_slider\'></div>\" ).insertAfter( t_select ).slider({
            min: 1,max: 2,range: \"max\",value: t_select[ 0 ].selectedindex + 1,slide: function( event,ui ) {
                t_select[ 0 ].selectedindex = ui.value - 1;
            }
        });
        $( \"#taste_val1\" ).change(function() {
            type_slider.slider( \"value\",this.selectedindex + 1 );
        });

        var d_select = $( \"#taste_val2\" );
        var slider = $( \"<div id=\'dist_slider\'></div>\" ).insertAfter( d_select ).slider({
            min: 1,max: 5,range: \"min\",value: d_select[ 0 ].selectedindex + 1,ui ) {
                d_select[ 0 ].selectedindex = ui.value - 1;
            }
        });
        $( \"#taste_val2\" ).change(function() {
            dist_slider.slider( \"value\",this.selectedindex + 1 );
        });
    });

FORM CODE 1st Selector:
 <td width=\"65%\" valign=\"top\"> 
    <form id=\"reservation\">
    <select name=\"taste_val1\" id=\"taste_val1\" style=\"display:none;\">
        <option value=\"1\">1</option>
        <option value=\"2\">2</option>
    </select>
</form></td>

2nd SELECTOR:
   <td width=\"65%\" valign=\"top\"> 
    <form id=\"search\">
        <select name=\"taste_val2\" id=\"taste_val2\" style=\"display:none;\">
            <option value=\"1\">1</option>
            <option value=\"2\">2</option>
            <option value=\"3\">3</option>
            <option value=\"4\">4</option>
            <option value=\"5\">5</option>
        </select>
    </form>
    </td>

拜托，有人吗？     

解决方法

        也许我读错了所有，但不应该

var slider = $( \"<div id=\'type_slider\'></div>\" )

是

var type_slider = $( \"<div id=\'type_slider\'></div>\" )

（与dist_slider相似）。