首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用于弹出式切换div代码中的选定项。

用于弹出式切换div代码中的选定项。
EN

Stack Overflow用户
提问于 2016-07-20 17:29:52
回答 1查看 452关注 0票数 0

我的问题对我来说似乎很复杂。所以我需要你们朋友的帮助。我会尽力解释的。

Image1:

在上面的图像中,如果用户单击"+Add/Edit“,就会出现一个弹出窗口,如image2下面所示。

Image2:

如果用户从弹出窗口中选择任何医疗条件,它将显示在页面上,如image3下面所示

Image3:

上述功能的HTML and script code在这里(请忽略只用于代码的小提琴的结果):https://jsfiddle.net/kirankapur/cr6t1tds/

现在我要增加一个新的功能。

Image4:

如果我们从Image2中选择任何医疗条件,那么“家庭医疗史”部分将如Image4中所示。例如:“老年痴呆症”和“哮喘”被选中,所以当我们点击弹出式按钮(完成),然后出现“家庭病史”部分(这应该按照选择/取消选择),其中每一个都有另一个'+Add/Edit‘。单击此“+Add/Edit”后,将打开另一个弹出窗口,如Image5下面所示。

Image5:

Image5弹出的“家庭医疗历史”部分条目相同,但每个条目都可以有不同的用户输入。在Image5弹出后,用户选择结果应该如下所示

Image6:

问题:我不知道如何实现在Image4、Image5和Image6中解释的新功能。

有人能帮我吗?(很抱歉问了这么长的问题)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-20 23:49:56

这里 --您可以在纯JQuery和HTML中找到一个快速弹琴样品 (没有结构,没有数据持久性),代码不那么优雅(可以改进和简化),但是可以给您一个关于如何获得所需行为的想法。

代码语言:javascript
运行
复制
<div id="dlgMedical" style="display:none;">
  <div class="row">
    <div class="col-xs-12">
      <ul class="list-group">
        <li class="list-group-item"><input type="checkbox" value="None"> None</li>
        <li class="list-group-item"><input type="checkbox" value="Depression"> Depression</li>
        <li class="list-group-item"><input type="checkbox" value="Lung cancer"> Lung cancer</li>
        <li class="list-group-item"><input type="checkbox" value="Anxiety"> Anxiety</li>
        <li class="list-group-item"><input type="checkbox" value="Stroke"> Stroke</li>
      </ul>
    </div>
      <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
          <button class="btn btn-block btn-warning btn-lg" id="cmdDiseaseDone">
          DONE
          </button>
        </div>
      </div>
  </div>
</div>

<div id="dlgParents" style="display:none;">
  <div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
        <li class="list-group-item"><input type="checkbox" value="Mother"> Mother</li>
        <li class="list-group-item"><input type="checkbox" value="Father"> Father</li>
        <li class="list-group-item"><input type="checkbox" value="Brother"> Brother</li>
        <li class="list-group-item"><input type="checkbox" value="Sister"> Sister</li>
        <li class="list-group-item"><input type="checkbox" value="Uncle"> Uncle</li>
      </ul>
    </div>
      <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
          <button class="btn btn-block btn-warning btn-lg" id="cmdParentsDone">
          DONE
          </button>
        </div>
      </div>
  </div>
</div>


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="panel-title bold">FAMILY MEDICAL HISTORY CONDITION(S)</div>
      <h5>Select medical condition(s)</h5>
      <a id="addDisease">+ Add/Edit</a>
    </div>
  </div>
  <div class="row">&nbsp;</div><div class="row">&nbsp;</div>
  <div class="row">
    <div class="col-xs-12">
      <div class="panel-title bold">FAMILY MEDICAL HISTORY</div>
      <h5>Select patient's family members</h5>
      <div id="divDisease"></div>
    </div>
  </div>
</div>

CSS

代码语言:javascript
运行
复制
.noTitleStuff .ui-dialog-titlebar {display:none;}
.bold{font-weight: bold;}
.item{font-style: italic;}
.addParent{padding:5px;}

Javascript

代码语言:javascript
运行
复制
  $("#dlgMedical").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind",dialogClass: 'noTitleStuff', width:400});

    $("#dlgParents").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind",dialogClass: 'noTitleStuff', width:400});

  $( "#addDisease" ).click(function() {
    $("#dlgMedical").dialog( "open" );
  });
    $( "#cmdDiseaseDone" ).click(function() {
    // clear selection
    $('#divDisease').empty();
    // iterate selected disease
    $( "li > input:checked" ).each(function( index ) {
      // add history elements
      var newID = $( this ).attr('value').replace(' ','_');
      $('#divDisease').html($('#divDisease').html() + '<div class="row"><div class="col-xs-12"><div class="item">'+$( this ).attr('value')+'</div></div></div><div id="div'+newID+'"></div><div class="row"><div class="col-xs-12"><a id="'+newID+'" class="addParent">+ Add/Edit</a></div></div><div class="row">&nbsp;</div>'); 
      $( ".addParent" ).click(function(e) {
        selectedItem = $(e.target).attr('id');
        $("#dlgParents").dialog( "open" );
      });
    });
    // clear checked
    $( "li > input:checked" ).each(function( index ) {
      $( this ).prop('checked',false);
    });
    $("#dlgMedical").dialog( "close" );
  });

  var selectedItem;

    $( "#cmdParentsDone" ).click(function() {
    // clear selection
    var selectedDIV = $('#div'+selectedItem);
    selectedDIV.empty();
    // iterate selected disease
    selectedDIV.html('<ul>');
    $( "li > input:checked" ).each(function( index ) {
        selectedDIV.html(selectedDIV.html() + '<li class="item">'+$( this ).attr('value')+'</li>');
    });
    selectedDIV.html(selectedDIV.html() + '</ul>');
    // clear checked
    $( "li > input:checked" ).each(function( index ) {
      $( this ).prop('checked',false);
    });
    $("#dlgParents").dialog( "close" );
  });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38487083

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档