单击并返回时将超链接文本更改为下拉列表

Question

所以我有一个可以作为超链接的 label/text，我需要将其更改为 Kendo 组合框（在 div 中）。在 javascript 中，有没有一种方法可以在单击文本时显示和隐藏或在标签和组合框之间进行更改。

所以我想要的输出是：

点击文本，组合框显示，点击远离标签，组合框消失，文本返回 select来自组合框的编辑值

目前我的代码如下所示：

<div id="siteText" onclick="showcombo()"> <a href="#">Site</a>  </div>
<div id="combobox" hidden>
    @(Html.Kendo().ComboBox()
                .Name("DDLSiteID")
                .DataTextField("SiteName")
                .DataValueField("SiteID")
                .BindTo((List<SitesClass>)ViewData["Sites"])
                .Filter(FilterType.Contains)
                .Value(Model.SiteID.ToString())
                .HtmlAttributes(new { style = "width: 300px;" })
                .Events(e => e.Change("onSiteChange"))
            )
</div>

<script>

function showcombo(e) { ///what do I do here? }

function onSiteChange(e) {
    $("#SiteID").val(e.sender.element[0].value);

    console.log("Site selected: ", $("#SiteID").val());

}

所以我需要的是能够单击站点超链接值并将其更改为组合框，然后当我 select 来自组合框的值时，它将超链接值更改为 selected 文本和组合框变回仅显示超链接。

我以前见过这个，但不记得在哪里。我不确定它是否像隐藏一个 div 并显示另一个一样简单？

Answer 1

是这样的吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
  
    <style type="text/css">
      #combobox-container {
        display: none
      }
    </style>
</head>
<body>

<div id="siteText"><a href="#">Site</a></div>
<div id="combobox-container">
  <input id="combobox" />
</div>
<script>
$("#combobox").kendoComboBox({
  dataSource: {
    data: [{
      text: 'Test 1',
      value: 1
    },{
      text: 'Test 2',
      value: 2
    },{
      text: 'Test 3',
      value: 3
    }]
  },
  dataTextField: 'text',
  dataValueField: 'value',
  change: function() {
    console.log(this.value());
  }
});
  
  $("#siteText").on('click', function(e) {
    $(this).hide();
    $("#combobox-container").show();
    e.stopPropagation();
  });
  
  $('#combobox-container').on('click', '*', function(e) {
    e.stopPropagation();
  });
  
  $('body').on('click', function() {
    $('#siteText').show();
    $("#combobox-container").hide();
  });
</script>
</body>
</html>

Dojo

单击并返回时将超链接文本更改为下拉列表

Change hyperlink text to dropdown on click and back

html

javascript

jquery

combobox

kendo-ui