在下拉菜单中动态更改选项

时间:2016-03-16 00:15:56

标签: javascript jquery html css dropdown

我正在尝试重新创建像http://bootsnipp.com/forms这样的表单生成器。 我很难搞清楚如何更改模态中的选项,这样当你点击保存时,它会更新下拉菜单中的选项,如图所示

enter image description here 以下是我目前的代码:

<div id ="doctordrop" class="form-group">
        <label class="col-md-3 control-label" for="buttondropdown" data-toggle="modal" data-target="#myModal" value="default" id="default">Default</label>

        <div class="col-md-9">                                        
            <select id="options" class="form-control select">
                <option id="op">Option 1</option>
                <option id="op">Option 2</option>
                <option id="op">Option 3</option>
                <option id="op">Option 4</option>
                <option id="op">Option 5</option>
            </select>
        </div>
    </div>
    <!-- DROP DOWN 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">Edit Drop Down Menu</h4>
            </div>
            <div class="modal-body">
              <form class="form-horizontal">
                <fieldset>
                    <div id="textfield" class="form-group">
                    <label class="col-md-3 control-label">Label Name</label>  
                    <div class="col-md-9">
                        <input type="text" class="form-control" name="labelname" id="defaultLabel" placeholder="put previous input name here" value=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Text area</label>
                    <div class="col-md-9">
                        <textarea class="form-control field" data-type="textarea-split" id="options">Option one Option two</textarea>
                    </div>
                </div>
                </fieldset>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="replaceDefault();">Save</button>

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

0 个答案:

没有答案