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;
    }
}

此函数从拾取器获取数据，然后根据两个操作相同的时间调用模态。

<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文件中有其他数据，不需要触及。

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

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

请告诉我这是你需要的。

谢谢！

Answer 2

您可以隐藏/显示所需的字段。例如：

someField.style.display = "block" //to show
someField.style.display = "none"  // to hide

或者您可以动态添加字段，如下所示：

fieldsContainer.appendChild(someField);

如何刷新模态中显示的字段

2 个答案: