Question

我要执行的操作是在从下拉列表中进行选择时使div淡入，该下拉列表中的字符串中必须包含特定单词。

到目前为止，在选择之前，我已经使它立即出现在页面加载中，现在，尽管选择了，但我仍将其显示在不显示的地方-请问是否有任何指针？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select style="font-family: Arial;" name="trailermodel" required>
  <option style="font-family: Arial;" selected="selected" disabled="disabled" value="">Trailer Model</option>
  <option style="font-family: Arial;" value="GD64 Ramp">GD64 with Ramp</option>
  <option style="font-family: Arial;" value="GD64 Tailboard">GD64 with Tailboard</option>
  <option style="font-family: Arial;" value="GD84 Ramp">GD84 with Ramp</option>
  <option style="font-family: Arial;" value="GD84 Tailboard">GD84 with Tailboard</option>
  <option style="font-family: Arial;" value="GD85 Ramp">GD85 with Ramp</option>
  <option style="font-family: Arial;" value="GD85 Tailboard">GD85 with Tailboard</option>
  <option style="font-family: Arial;" value="P6e Ramp">P6e with Ramp</option>
  <option style="font-family: Arial;" value="P6e Tailboard">P6e with Tailboard</option>
  <option style="font-family: Arial;" value="P6e Livestock">P6e Livestock Model</option>
  <option style="font-family: Arial;" value="P7e Ramp">P7e with Ramp</option>
  <option style="font-family: Arial;" value="P7e Tailboard">P7e with Tailboard</option>
  <option style="font-family: Arial;" value="P7e Livestock">P7e Livestock Model</option>
  <option style="font-family: Arial;" value="P8e Ramp">P8e with Ramp</option>
  <option style="font-family: Arial;" value="P8e Tailboard">P8e with Tailboard</option>
</select>
<div class="towbar_req">
  <p>Requirements (if tailboard*):</p>
</div>

function onOpen() {
  SpreadsheetApp.getUi().createMenu('Google Picker')
      .addItem('Choose Folder', 'showPicker')
      .addToUi();
}

/**
 * Displays an HTML-service dialog in Google Sheets that contains client-side
 * JavaScript code for the Google Picker API.
 */
function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('Picker.html')
      .setWidth(600)
      .setHeight(425)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Folder');
}

function getOAuthToken() {
  DriveApp.getRootFolder();
  return ScriptApp.getOAuthToken();
}

Answer 1

您需要在select下拉列表中添加一个function changeSelect(){ var selected = $("select option:selected[value*='tailboard']"); if (selected.length) { $("#tcanopy .towbar_req").fadeIn("slow"); } } //check on page load changeSelect();事件，以便在选择该选项时淡入：

.towbar_req {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange = "changeSelect()">
  <option value=""> select </option>
  <option value="tailboard text"> tailboard 1 </option>
  <option value="text"> some other text</option>
  <option value="123 tailboard text"> tailboard text 123</option>
</select>

<div id = 'tcanopy'>
  <div class='towbar_req'>
    Fade in fade out
  </div>
</div>

from app import class1

Answer 2

尝试此操作：您可以具有更改事件处理程序并检查选择框的值。如果包含tailborad，则显示div

$("select").on("change", function() {
    var show = $(this).val().toLowerCase().indexOf("tailboard")!=-1;
    if(show) {
     $("#tcanopy .towbar_req").fadeIn("slow");
    }
}}

Answer 3

Working fiddle 。

您需要在所选内容上附加一个change事件监听器，然后使用Tailboard检查所选的选项值是否包含.indexOf()一词。

速记：

$('select[name="trailermodel"]').on('change', function() {
   $("#tcanopy .towbar_req").toggle($(this).val().indexOf("Tailboard") != -1);
});

$('select[name="trailermodel"]').on('change', function() {
  var target = $("#tcanopy .towbar_req");

  if ($(this).val().indexOf("Tailboard") != -1) {
      target.fadeIn("slow");
  } else {
      target.fadeOut("slow");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select style="font-family: Arial;" name="trailermodel" required>
  <option style="font-family: Arial;" selected="selected" disabled="disabled" value="">Trailer Model</option>
  <option style="font-family: Arial;" value="GD64 Ramp">GD64 with Ramp</option>
  <option style="font-family: Arial;" value="GD64 Tailboard">GD64 with Tailboard</option>
  <option style="font-family: Arial;" value="GD84 Ramp">GD84 with Ramp</option>
  <option style="font-family: Arial;" value="GD84 Tailboard">GD84 with Tailboard</option>
  <option style="font-family: Arial;" value="GD85 Ramp">GD85 with Ramp</option>
  <option style="font-family: Arial;" value="GD85 Tailboard">GD85 with Tailboard</option>
  <option style="font-family: Arial;" value="P6e Ramp">P6e with Ramp</option>
  <option style="font-family: Arial;" value="P6e Tailboard">P6e with Tailboard</option>
  <option style="font-family: Arial;" value="P6e Livestock">P6e Livestock Model</option>
  <option style="font-family: Arial;" value="P7e Ramp">P7e with Ramp</option>
  <option style="font-family: Arial;" value="P7e Tailboard">P7e with Tailboard</option>
  <option style="font-family: Arial;" value="P7e Livestock">P7e Livestock Model</option>
  <option style="font-family: Arial;" value="P8e Ramp">P8e with Ramp</option>
  <option style="font-family: Arial;" value="P8e Tailboard">P8e with Tailboard</option>
</select>
<br>
<div id="tcanopy">
  <span class="towbar_req" style="display:none">Target Element</span>
</div>

Answer 4

首先，当下拉值更改时，您无需分配代码即可运行。文档加载后（根据您对document.ready的评论），您所拥有的将运行一次。您需要将逻辑包装在适当的事件处理程序中，像这样...

$("select").on("change", function() {
    if (RegExp(/tailboard/i).test($(this).val()) {
        $("#tcanopy .towbar_req").fadeIn("slow");    
    }
    else {
        $("#tcanopy .towbar_req").fadeOut("slow");
    }
});

这样，每当匹配$("select")的任何内容更改时，代码都将被执行。如果在页面上添加更多选择元素，请记住这一点。您可能要给它一个ID，然后用它选择它。

第二，您的代码将在所选值中查找tailboard，但是您的值中没有该值-它们包含Tailboard（大写T）。

上面的代码使用正则表达式在值中寻找tailboard，但是不区分大小写，因此应该可以解决您的问题。

这是一个可行的例子。

注意：：我包括CSS来设置要切换的元素的初始状态。

$("select").on("change", function() {

    // show/hide tailboard related div
    if (RegExp(/tailboard/i).test($(this).val())) {
        $("#tcanopy .towbar_req").fadeIn("slow");    
    }
    else {
        $("#tcanopy .towbar_req").fadeOut("slow");
    }

    // show/hide ramp related div
    if (RegExp(/ramp/i).test($(this).val())) {
        $("#tcanopy .ramp_req").fadeIn("slow");    
    }
    else {
        $("#tcanopy .ramp_req").fadeOut("slow");
    }
});

.towbar_req,
.ramp_req {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tcanopy">
    <select name="trailermodel" required>
        <option style="font-family: Arial;" selected="selected" disabled="disabled" value="">Trailer Model</option>
        <option value="GD64 Ramp">GD64 with Ramp</option>
        <option value="GD64 Tailboard">GD64 with Tailboard</option>
        <option value="GD84 Ramp">GD84 with Ramp</option>
        <option value="GD84 Tailboard">GD84 with Tailboard</option>
        <option value="GD85 Ramp">GD85 with Ramp</option>
        <option value="GD85 Tailboard">GD85 with Tailboard</option>
        <option value="P6e Ramp">P6e with Ramp</option>
        <option value="P6e Tailboard">P6e with Tailboard</option>
        <option value="P6e Livestock">P6e Livestock Model</option>
        <option value="P7e Ramp">P7e with Ramp</option>
        <option value="P7e Tailboard">P7e with Tailboard</option>
        <option value="P7e Livestock">P7e Livestock Model</option>
        <option value="P8e Ramp">P8e with Ramp</option>
        <option value="P8e Tailboard">P8e with Tailboard</option>
    </select>
    <div class="towbar_req">
        <p>Requirements (if tailboard*):</p>
    </div>
    <div class="ramp_req">
        <p>Requirements (if ramp*):</p>
    </div>
</div>

从下拉菜单中选择包含特定单词时显示div

4 个答案: