javascript - 如何刷新模式中显示的字段

Question

我确定这是一个非常基本的问题，但我很困惑!我有一个看起来不错的模式，我想做的是一旦从下拉列表中选择了一个值，就会根据选择的选项显示不同的字段!我知道如何获取该值，我打算将该值发送到一个 javascript 方法，该方法确定选择了哪个选项。我不知道的是如何根据选择让不同的字段出现在我的模式中。

如有任何建议，我们将不胜感激!

编辑:这是我正在处理的内容

function pickerCallback(data) {
  if (data.action == google.picker.Action.PICKED) {
    fileId = data.docs[0].id;
    $('#\\#myModal').modal('show');
    document.getElementById('doc_id').value = fileId;
    }
}

此函数从选择器获取数据，然后根据两个 Action 何时相同来调用模态。

<div id="result"></div>
<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>
    <div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
        <button type="button" class="close" onclick="createPicker()" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

    </button>
    <h4 class="modal-title">Set Metadata</h4>
  </div>
  <div class="modal-body">
  <div id="doc_id"></div>
     Department ID: <select id = "drop" style="margin-bottom: 0.25cm;">
    <option value="#001">#001---NDA</option>
    <option value="#002">#002---Reseller Agreement</option>
    <option value="#003">#003---End User Agreement Amendments</option>
    <option value="#004">#004---Supplier Agreement</option>
    <option value="#005">#005---Third Party Providers</option>
    <option value="#006">#006---Wireless Carrier Agreements</option>
    <option value="#007">#007---Telematics Agreement Service</option>
    <option value="#008">#008---Large Customer Contract</option>
    <option value="#009">#009--Marketplace Provider Agreement</option>
  </select>

这是我所说的模态，因此在选择选项时，它将采用值并根据用户选择的内容显示不同的字段。我知道模态缺少结束标记，下拉列表下方的 html 文件中还有其他数据不需要触及。

最后它将它发送到一个函数，该函数确定将显示模态的哪个 View

function selectView(){
        var view = document.getElementById('drop').value;

        if (view =='NDA'){
            //show NDA view on modal
        }

    }

谢谢

Answer 1

我在此处添加示例 HTML 并使用 bootstrap 插件。在模态主体中，我们有 3 个选择，根据选择内容将显示/隐藏

    <div class="container">
  <h2>Activate Modal with JavaScript</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="myBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">


        <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

和JS

$(document).ready(function(){
$("select").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }
        else{
            $(".box").hide();
        }
    });
}).change();

});

CSS 将是

    .box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }

DEMO FIDDLE

请告诉我这是您需要的。

谢谢!