使用JQuery和Bootstrap更改选择选项的标签文本

Question

我正在使用Bootstrap 3和jQuery 1.11进行模态研究。 模态具有选择，标记，输入和字形元素。 我想根据所选选项更改字形的标签内容和弹出框标题。 我写了以下代码来实现这一目标

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无法正常工作，因为标签和弹出窗口标题在首次加载页面时会更改，但是在加载后选择其他选项时不会更改。 我要确保它的工作方式类似于此示例。 我是新的jQuery，Bootstrap和Web开发人员，我认为这可能与bootstrap和jquery兼容性有关。 我需要修复它的帮助。

Answer 1

您的函数调用不正确，请将您的js代码的最后一行更改为：

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

您的js代码中也存在拼写错误。 else if(theValue === "Turncated Normal" ) ， Truncated写错了，因此除非您进行更改，否则它都将不起作用。

工作实例

使用JQuery和Bootstrap更改选择选项的标签文本

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-08 22:54:11

使用JQuery和Bootstrap更改选择选项的标签文本

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-08 22:54:11

解决方案1
1 已采纳 2014-12-08 22:54:11