Question

我遇到两个jquery Ui组合框的问题，它会自动填充。一世   想要在填充一个下拉列表然后填写其他下拉列表时，它会变空   反之亦然。

HTML

<table>
<tr>
<td align="left">Employee Name</td>
<td align="left" id="emp_name_td">
    <select id="emp_name" name="emp_name" >
        <option value="">Please specify</option>
      <c:forEach  var="employee" items="${employeeDetailList}">
        <option value="${employee.citrixId}" <c:if test="${userIdData eq employee.citrixId}">selected</c:if> > ${employee.firstName} ${employee.lastName} (${employee.citrixId}) </option>
      </c:forEach>
    </select>
<span class='error' id='nameError'></span>
</td>
<td align="left">Scorecard Type</td>
<td align="left" id="scorecardtype_td">
     <select  id="scorecardtype" name="scorecardtype" >
         <option value="">Select Type</option>
      <c:forEach  var="scorecardOption" items="${scorecardTypes}">
         <option value="${scorecardOption.scorecardId}" <c:if test="${scorecardOption.scorecardId eq scorecardId}">selected</c:if> >${scorecardOption.scorecardName}</option>
      </c:forEach>
    </select><input type="hidden" id="groupId" name="groupId"/>
<span class='error' id='scorecardtypeError'></span>
</td>
</tr>
</table>

jquery 我试过这个但它没有工作，因为当它加载并在 custome-combobox中显示一个输入框时我试图抓住它

    $('document').ready(function(){
    $('#emp_name').click(function(){
        alert('empty scorecard');
        $('#scorecardtype .custom-combobox input').val("");
     });   
    $('#scorecardtype').click(function(){
        alert('empty emp');
        $('#emp_name_td .custom-combobox input').val(""); 
    });
});

Answer 1

对于组合框，我使用了来自jquery ui example的示例代码。我编写了两个函数empNameClick()和scorecardtypeClick()来清除字段，并在jquery ui的_removeIfInvalid内调用。 _removeIfInvalid是每次autocompletechange事件occocurs。

$('document').ready(function() {

  function empNameClick() {
    $('#emp_name_td .custom-combobox input').val("");
    $('#emp_name').prop('selectedIndex', 0);
  }

  function scorecardtypeClick() {
    $('#scorecardtype_td .custom-combobox input').val("");
    $('#scorecardtype').prop('selectedIndex', 0);
  }

  $(function() {
    $.widget("custom.combobox", {
      _create: function() {
        this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);

        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },

      _createAutocomplete: function() {
        var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";

        this.input = $("<input>")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy(this, "_source")
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });

        this._on(this.input, {
          autocompleteselect: function(event, ui) {
            ui.item.option.selected = true;
            this._trigger("select", event, {
              item: ui.item.option
            });
          },

          autocompletechange: "_removeIfInvalid"
        });
      },

      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;

        $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .on("mousedown", function() {
            wasOpen = input.autocomplete("widget").is(":visible");
          })
          .on("click", function() {
            input.trigger("focus");

            // Close if already visible
            if (wasOpen) {
              return;
            }

            // Pass empty string as value to search for, displaying all results
            input.autocomplete("search", "");
          });
      },

      _source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response(this.element.children("option").map(function() {
          var text = $(this).text();
          if (this.value && (!request.term || matcher.test(text)))
            return {
              label: text,
              value: text,
              option: this
            };
        }));
      },

      _removeIfInvalid: function(event, ui) {
        // Selected an item, nothing to do
        console.log(ui.item.option.parentElement.id);

        if (ui.item.option.parentElement.id === 'emp_name') {
          scorecardtypeClick();
        } else if (ui.item.option.parentElement.id === 'scorecardtype') {
          empNameClick();
        }
        // scorecardtypeClick()
        if (ui.item) {
          return;
        }

        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children("option").each(function() {
          if ($(this).text().toLowerCase() === valueLowerCase) {
            this.selected = valid = true;
            return false;
          }
        });

        // Found a match, nothing to do
        if (valid) {
          return;
        }

        // Remove invalid value
        this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
        this.element.val("");
        this._delay(function() {
          this.input.tooltip("close").attr("title", "");
        }, 2500);
        this.input.autocomplete("instance").term = "";
      },

      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });

    $("#scorecardtype").combobox();
    $("#emp_name").combobox();

  });

});

.custom-combobox {
  position: relative;
  display: inline-block;
}

.custom-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
}

.custom-combobox-input {
  margin: 0;
  padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<table>
  <tr>
    <td align="left">Employee Name</td>
    <td align="left" id="emp_name_td">
      <select id="emp_name" name="emp_name">
                <option value="">Please specify</option>
                <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>
                <option value="6"> 6 </option>
            </select>
      <span class='error' id='nameError'></span>
    </td>
    <td align="left">Scorecard Type</td>
    <td align="left" id="scorecardtype_td">
      <select id="scorecardtype" name="scorecardtype">
                <option value="">Select Type</option>
                <option value="1"> t1 </option>
                <option value="2"> t2 </option>
                <option value="3"> t3 </option>
                <option value="4"> t4 </option>
                <option value="5"> t5 </option>
                <option value="6"> t6 </option>
            </select>
      <input type="hidden" id="groupId" name="groupId" />
      <span class='error' id='scorecardtypeError'></span>
    </td>
  </tr>
</table>

点击一个组合框清除其他组合框，反之亦然

1 个答案: