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

Question

Im sure this is a very basic question, but i'm stumped! I have a modal that appears fine and what im trying to do is once a value from a dropdown is selected, have different fields appear depending on what option was picked! I know how to get the value and i intend on sending that value to a javascript method which determines what option was selected. What i don't know is how to get different fields to appear on my modal depending on the selection.

Any suggestions are always appreciated!

Edit: Here is what i'm working with

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

This function takes data from a picker and then the modal gets called up based on when two actions are the same.

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

This is the modal that I was speaking about, so on the select of the option it will take the value and show different fields based on what the user has selected. I am aware that the modal is missing the ending tags there was other data in the html file below the drop down that didnt need to be touched.

Finally it will send it to a function that determines which view of the modal will be shown

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

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

    }

Thanks

Answer 1

Here am adding sample HTML and am using bootstrap plugin. In modal body we have 3 selections, based on selection content will be show/hide

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

And 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 would be

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

DEMO FIDDLE

Please let me know is this what you required.

Thank you!

Answer 2

You can just hide/show the fields that you need. For example:

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

Or you can add fields dynamically, like this:

fieldsContainer.appendChild(someField);