jQuery组合框多个实例

我在我的网站上使用了两个“选择”下拉列表

我需要检查用户单击了哪些组合框

选择如下所示：

<select name="select1" id="combobox"/>
<select name="select2" id="combobox"/>

      (function( $ ) {
$.widget( "ui.combobox", {
  _create: function() {
    var input,
      that = this,
      select = this.element.hide(),
      selected = select.children( ":selected" ),
      value = selected.val() ? selected.text() : "",
      wrapper = this.wrapper = $( "<span>" )
        .addClass( "ui-combobox" )
        .insertAfter( select );

    function removeIfInvalid(element) {
      var value = $( element ).val(),
        matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
        valid = false;
      select.children( "option" ).each(function() {
        if ( $( this ).text().match( matcher ) ) {
          this.selected = valid = true;
          return false;
        }
      });
      if ( !valid ) {
        // remove invalid value, as it didn't match anything
        $( element )
         // .val( "" )
          .attr( "title", value + " will be added as new." )
          .tooltip( "open" );
        //select.val( "" );
        //add new site
        $('#new_site_added').val(value);
        alert(ui.item.option);

        setTimeout(function() {
          input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        //input.data( "autocomplete" ).term = "";
        return false;
      }
    }

    input = $( "<input>" )
      .appendTo( wrapper )
      .val( value )
      .attr( "title", "" )
      .addClass( "ui-state-default ui-combobox-input" )
      .autocomplete({
        delay: 0,
        minLength: 0,
        source: function( request, response ) {
          var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
          response( select.children( "option" ).map(function() {
            var text = $( this ).text();
            if ( this.value && ( !request.term || matcher.test(text) ) )
              return {
                label: text.replace(
                  new RegExp(
                    "(?![^&;]+;)(?!<[^<>]*)(" +
                    $.ui.autocomplete.escapeRegex(request.term) +
                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                  ), "<strong>$1</strong>" ),
                value: text,
                option: this
              };
          }) );
        },
        select: function( event, ui ) {
          ui.item.option.selected = true;
          that._trigger( "selected", event, {
            item: ui.item.option
          });
          $('#hidden_element_on_page').val("0"); // this is where i would like to check which combobox is selected.

        },
        change: function( event, ui ) {
          if ( !ui.item )
            return removeIfInvalid( this );
        }
      })
      .addClass( "ui-widget ui-widget-content ui-corner-left" );

    input.data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
    };

    $( "<a>" )
      .attr( "tabIndex", -1 )
      .attr( "title", "Show All Items" )
      .tooltip()
      .appendTo( wrapper )
      .button({
        icons: {
          primary: "ui-icon-triangle-1-s"
        },
        text: false
      })
      .removeClass( "ui-corner-all" )
      .addClass( "ui-corner-right ui-combobox-toggle" )
      .click(function() {
        // close if already visible
        if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
          input.autocomplete( "close" );
          removeIfInvalid( input );
          return;
        }

        // work around a bug (likely same cause as #5265)
        $( this ).blur();

        // pass empty string as value to search for, displaying all results
        input.autocomplete( "search", "" );
        input.focus();
      });

      input
        .tooltip({
          position: {
            of: this.button
          },
          tooltipClass: "ui-state-highlight"
        });
  },

  destroy: function() {
    this.wrapper.remove();
    this.element.show();
    $.Widget.prototype.destroy.call( this );
  }
});
  })( jQuery );

  $(function() {
   $( "#combobox, #combobox2" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#combobox, #combobox2" ).toggle();
    });
  });

如果用户在下拉列表中找不到该值，则会在表单提交时将该值添加到数据库中。我了解了php的一面。当组合框无法匹配时，我只需要更改form元素的值。我已经为1选择工作，打赌我无法区分用户输入的组合框

jquery代码如下所示：

<select name="select1" id="combobox"/>
<select name="select2" id="combobox"/>

      (function( $ ) {
$.widget( "ui.combobox", {
  _create: function() {
    var input,
      that = this,
      select = this.element.hide(),
      selected = select.children( ":selected" ),
      value = selected.val() ? selected.text() : "",
      wrapper = this.wrapper = $( "<span>" )
        .addClass( "ui-combobox" )
        .insertAfter( select );

    function removeIfInvalid(element) {
      var value = $( element ).val(),
        matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
        valid = false;
      select.children( "option" ).each(function() {
        if ( $( this ).text().match( matcher ) ) {
          this.selected = valid = true;
          return false;
        }
      });
      if ( !valid ) {
        // remove invalid value, as it didn't match anything
        $( element )
         // .val( "" )
          .attr( "title", value + " will be added as new." )
          .tooltip( "open" );
        //select.val( "" );
        //add new site
        $('#new_site_added').val(value);
        alert(ui.item.option);

        setTimeout(function() {
          input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        //input.data( "autocomplete" ).term = "";
        return false;
      }
    }

    input = $( "<input>" )
      .appendTo( wrapper )
      .val( value )
      .attr( "title", "" )
      .addClass( "ui-state-default ui-combobox-input" )
      .autocomplete({
        delay: 0,
        minLength: 0,
        source: function( request, response ) {
          var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
          response( select.children( "option" ).map(function() {
            var text = $( this ).text();
            if ( this.value && ( !request.term || matcher.test(text) ) )
              return {
                label: text.replace(
                  new RegExp(
                    "(?![^&;]+;)(?!<[^<>]*)(" +
                    $.ui.autocomplete.escapeRegex(request.term) +
                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                  ), "<strong>$1</strong>" ),
                value: text,
                option: this
              };
          }) );
        },
        select: function( event, ui ) {
          ui.item.option.selected = true;
          that._trigger( "selected", event, {
            item: ui.item.option
          });
          $('#hidden_element_on_page').val("0"); // this is where i would like to check which combobox is selected.

        },
        change: function( event, ui ) {
          if ( !ui.item )
            return removeIfInvalid( this );
        }
      })
      .addClass( "ui-widget ui-widget-content ui-corner-left" );

    input.data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
    };

    $( "<a>" )
      .attr( "tabIndex", -1 )
      .attr( "title", "Show All Items" )
      .tooltip()
      .appendTo( wrapper )
      .button({
        icons: {
          primary: "ui-icon-triangle-1-s"
        },
        text: false
      })
      .removeClass( "ui-corner-all" )
      .addClass( "ui-corner-right ui-combobox-toggle" )
      .click(function() {
        // close if already visible
        if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
          input.autocomplete( "close" );
          removeIfInvalid( input );
          return;
        }

        // work around a bug (likely same cause as #5265)
        $( this ).blur();

        // pass empty string as value to search for, displaying all results
        input.autocomplete( "search", "" );
        input.focus();
      });

      input
        .tooltip({
          position: {
            of: this.button
          },
          tooltipClass: "ui-state-highlight"
        });
  },

  destroy: function() {
    this.wrapper.remove();
    this.element.show();
    $.Widget.prototype.destroy.call( this );
  }
});
  })( jQuery );

  $(function() {
   $( "#combobox, #combobox2" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#combobox, #combobox2" ).toggle();
    });
  });

（函数（$）{
$.widget（“ui.combobox”{
_创建：函数（）{
var输入，
那=这个，
select=this.element.hide（），
selected=select.children（“：selected”），
value=selected.val（）？selected.text（）：“”，
包装器=此。包装器=$（“”）
.addClass（“ui组合框”）
.insertAfter（选择）；
函数removeIfInvalid（元素）{
var值=$（元素）.val（），
matcher=newregexp（“^”+$.ui.autocomplete.escapeRegex（value）+“$”，“i”），
有效=错误；
select.children（“选项”）.each（函数（）{
if（$（this）.text（）.match（matcher））{
this.selected=valid=true；
返回false；
}
});
如果（！有效）{
//删除无效值，因为它与任何内容都不匹配
$（元素）
//.val（“”）
.attr（“标题”，值+“将作为新添加。”）
.工具提示（“打开”）；
//选择.val（“”）；
//添加新站点
$（'u#new#u site_added'）.val（值）；
警报（ui.item.option）；
setTimeout（函数（）{
input.tooltip（“close”）.attr（“title”和“）；
}, 2500 );
//输入数据（“自动完成”）。术语=”；
返回false；
}
}
输入=$（“”）
.appendTo（包装器）
.val（值）
.attr（“标题”、“名称”）
.addClass（“ui状态默认ui组合框输入”）
.自动完成({
延迟：0，
最小长度：0，
来源：功能（请求、响应）{
var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（select.children（“option”）.map（函数（）{
var text=$（this.text（）；
if（this.value&（！request.term | | matcher.test（text）））
返回{
标签：text.replace(
新正则表达式(
（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”
)“$1”，
值：文本，
选项：这个
};
}) );
},
选择：功能（事件、用户界面）{
ui.item.option.selected=true；
触发（“选定”，事件{
项目：ui.item.option
});
$（“#hidden_element_on_page”）.val（“0”）//我想在这里检查选择了哪个组合框。
},
更改：功能（事件、用户界面）{
如果（！ui.item）
返回removeIfInvalid（此）；
}
})
.addClass（“ui小部件ui小部件内容ui左角”）；
输入数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录（ul）；
};
$( "" )
.attr（“tabIndex”，-1）
.attr（“标题”、“显示所有项目”）
.工具提示（）
.appendTo（包装器）
.按钮({
图标：{
主要：“ui-icon-triangle-1-s”
},
文本：false
})
.removeClass（“用户界面角全部”）
.addClass（“ui右角ui组合框切换”）
。单击（函数（）{
//如果已经可见，请关闭
如果（input.autocomplete（“小部件”）为（“：可见”））{
输入。自动完成（“关闭”）；
removeIfInvalid（输入）；
返回；
}
//解决bug（可能与#5265的原因相同）
$（this.blur（）；
//将空字符串作为要搜索的值传递，显示所有结果
input.autocomplete（“搜索”和“）；
input.focus（）；
});
输入
.工具提示({
职位：{
这个按钮
},
tooltipClass：“ui状态突出显示”
});
},
销毁：函数（）{
this.wrapper.remove（）；
this.element.show（）；
$.Widget.prototype.destroy.call（this）；
}
});
})（jQuery）；
$（函数（）{
$（“#combobox，#combobox2”）.combobox（）；
$（“#切换”）。单击（函数（）{
$（“#组合框，#组合框2”）.toggle（）；
});
});

W3C将ID定义为“元素的唯一标识符”。所以一页上不能有两个相同的ID

<select name="select1" id="combobox1"/>
<select name="select2" id="combobox2"/>

希望这有帮助