使用 JQuery 和引导程序更改选择选项的标签文本答案

【问题标题】：changing label text for select options using JQuery and bootstrap使用 JQuery 和引导程序更改选择选项的标签文本
【发布时间】：2014-12-08 22:44:21
【问题描述】：

我正在使用 bootstrap 3 和 jQuery 1.11 开发模式。 modal 有 select、label、input 和 glyphion 元素。我想根据选择的选项更改 glyphion 的标签内容和弹出框的标题。我写了下面的代码来实现这个

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div class="modal fade" id="apstStopModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog large">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Enter  Information</h4>
          </div>
          <form class="form-horizontal" id="stopForm">
            <div class="modal-body">
              <fieldset class="frame-border">
                <legend class="frame-border">Start-up Time</legend>
                <div class="col-xs-12 col-md-2">
                  <div class="form-group">
                    <div class="controls col-xs-12 col-md-12">
                      <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Start-up time of the stop."></span>
                      <select id="startUpTime" name="StartUpTime" class="form-control" >
                        <option value="Fixed">Fixed</option>
                        <option value="Uniform">Uniform</option>
                        <option value="Truncated Normal">Truncated Normal</option>
                        <option value="Exponential">Exponential</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-xs-12 col-md-5">
                  <div class="form-group required">
                    <label class="control-label col-xs-6 col-md-6" for="startUpTimeParam1" id="startUpParam1Label" >Name</label>
                    <div class="controls col-xs-6 col-md-6">
                      <span class="help glyphicon glyphicon-info-sign" id="startUpParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>
                      <input type="number" id="startUpTimeParam1" name="Name" class="form-control" value="0.00">
                    </div>
                  </div>
                </div>
                <div class="col-xs-12 col-md-5">
                  <div class="form-group required">
                    <label class="control-label col-xs-6 col-md-6" for="startUpTimeParam2" id="startUpParam2Label" >Name</label>
                    <div class="controls col-xs-6 col-md-6">
                      <span class="help glyphicon glyphicon-info-sign" id="startUpParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>
                      <input type="number" id="startUpTimeParam2" name="Name" class="form-control"  value="0.00">
                    </div>
                  </div>
                </div>
              </fieldset>
              <script src="ApstCustomJS.js"></script>
            </div>
            <!-- modal-body -->
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript

function startUpChange() {
     var theValue = $("#startUpTime").find("option:selected").text();
     if(theValue === "Fixed" )
         {
         $('#startUpParam1Help').attr("title","Please provide the start time");
         $('#startUpParam1Label').html("Start Time");
         $('#startUpParam2Help').attr("title","Please provide the stop time");
         $('#startUpParam2Label').html("Stop Time");
         }
     else if(theValue === "Uniform" )
     {
     $('#startUpParam1Help').attr("title","Please provide the lower bound time");
     $('#startUpParam1Label').html("Lower Bound");
     $('#startUpParam2Help').attr("title","Please provide the upper bound time");
     $('#startUpParam2Label').html("Upper Bound");
     }
     else if(theValue === "Turncated Normal" )
     {
     $('#startUpParam1Help').attr("title","Please provide the mean time ");
     $('#startUpParam1Label').html("Mean");
     $('#startUpParam2Help').attr("title","Please provide the standard deviation time");
     $('#startUpParam2Label').html("Standard Deviation");
     }
}

$("#startUpTime").change(startUpChange()).change();

CSS

.form-group {
 padding-right:20px;
  position:relative;
}

 .help {
 position:absolute;
 right:-8px;
 top:12px;
}

fieldset.frame-border {
    border: 1px groove #ddd !important;
    padding: 0 1em !important;
    margin: 0 0 1em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.frame-border {
    font-size: 1.1em !important;
    font-weight: bold !important;
    text-align: left !important;
    width:inherit;
    padding:0 10px;
    border-bottom:none;
}

.form-group.required .control-label:after { 
   content:"*";
   color:red;
}

这是它现在的样子。

Javascript 无法正常工作，因为标签和弹出框标题在页面第一次加载时会发生变化，但在加载后选择其他选项时不会发生变化。我想确保它像this 示例一样工作。我是新的 jQuery、Bootstrap 和 web 开发，我认为这可能与 bootstrap 和 jquery 兼容性有关。我需要帮助来修复它。

【问题讨论】：

根据 JSFiddle 控制台错误：“Bootstrap 的 JavaScript 需要 jQuery 版本 1.9.1 或更高版本”。另请参阅此问题：stackoverflow.com/questions/18891829/…

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你的函数调用不正确，把你的最后一行js代码改成这样：

$("#startUpTime").change(function() {
  startUpChange();
});

您的 js 代码中也存在拼写错误。 else if(theValue === "Turncated Normal" ), 截断写错了，因此除非你改变它，否则这也不起作用。

Working Example

【讨论】：

谢谢。不知道你必须在一个函数中调用一个函数才能工作。