Question

我在我的网站上使用combobox两个“选择”下拉菜单。

我需要检查一下用户点击了哪些组合框。

选择是这样的：

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

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

jquery代码是这样的：

      (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();
    });
  });

Answer 1

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

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

现在你可以访问它。

更好的方法是使用id = combobox1和id = combobox2

来包装div中的选择

<div id="combobox1">
    <select name="select1"/>
</div>

<div id="combobox2">  
    <select name="select2"/>  
</div>

所以你可以做例如。获得

$("#combobox1 .ui-autocomplete-input").attr("tabindex", "1");
$("#combobox2 .ui-autocomplete-input").attr("tabindex", "2");

希望这有帮助。

jQuery组合框多个实例

1 个答案: