如何使價值 - 鍵入和選擇後相同

Question

需要幫助。

我想讓內容輸入與keyin相同，並在textarea編輯時禁用下拉菜單。

目前，內容將在下拉菜單後顯示。當鍵入textarea並選擇該列表時，在關閉時它不會與頂部的鍵入相同。選擇該列表後，嘗試鍵入時，下拉列表將打開。如何禁用它。

$(document).on('click', '.btn-select', function (e) { 
 
    e.preventDefault(); 
 
    var ul = $(this).find("ul"); 
 
    if ($(this).hasClass("active")) { 
 
     if (ul.find("li").is(e.target)) { 
 
      var target = $(e.target); 
 
      target.addClass("selected").siblings().removeClass("selected"); 
 
      var value = target.html(); 
 
      $(this).find(".btn-select-input").val(value); 
 
      $(this).find(".btn-select-value").html(value); 
 
     } 
 
     ul.hide(); 
 
     $(this).removeClass("active"); 
 
    } 
 
    else { 
 
     $('.btn-select').not(this).each(function() { 
 
      $(this).removeClass("active").find("ul").hide(); 
 
     }); 
 
     ul.slideDown(300); 
 
     $(this).addClass("active"); 
 
    } 
 
}); 
 
\t 
 
$('.dropinput').click(function(e) { 
 
      e.stopPropagation(); 
 
    });

.form-control { 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #e9e9e9; 
 
    border-radius: 3px; 
 
    box-shadow: none; 
 
    color: #4f5858; 
 
    display: block; 
 
    font-size: 13px; 
 
    height: 34px; 
 
    line-height: 1.42857; 
 
    padding: 6px; 
 
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; 
 
    width: 100%; 
 
\t font-weight: normal; 
 
\t margin: 0px; 
 
} 
 

 
.form-control:focus { 
 
    border-color: #b6b6b6; 
 
    box-shadow: none; 
 
    outline: 0 none; 
 
} 
 

 
.close { 
 
    color: #4f5858; 
 
\t text-shadow: none; 
 
\t font-weight: normal; 
 
\t font-size: 26px; 
 
\t opacity: 1.0; 
 
} 
 

 
.close:hover, .close:focus { 
 
    color: #000; 
 
    opacity: 0.5; 
 
} 
 

 
.form-control::-moz-placeholder { 
 
    color: #4f5858; 
 
} 
 

 
.btn-grey { 
 
    background-color: #fff; 
 
    border: 1px solid #e9e9e9; 
 
    border-radius: 50%; 
 
    color: #4f5858; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-weight: 300; 
 
    height: 60px; 
 
    margin: 0px auto 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    transition: opacity 0.25s ease-in-out 0s; 
 
    width: 60px; 
 
\t font-size: 11px; 
 
\t display: inline; 
 
} 
 

 
.btn-grey:hover { 
 
    border: none; 
 
    color: #fff; 
 
\t background-color: #f05423; 
 
} 
 

 
.btn-select { 
 
    position: relative; 
 
    padding: 6px; 
 
    width: 100%; 
 
    border-radius: 3px; 
 
} 
 

 
.btn-select .btn-select-value { 
 
    padding: 2px 6px; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 35px; 
 
    text-align: left; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    border: none !important; 
 

 
} 
 

 
.btn-select .btn-select-arrow { 
 
    float: right; 
 
    line-height: 18px; 
 
    padding: 3px 10px; 
 
    top: 0; 
 
\t font-size: 10px; 
 
} 
 

 
.btn-select ul { 
 
    display: none; 
 
    background-color: #fff; 
 
    color: #4f5858; 
 
    clear: both; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: absolute; 
 
    right: -0.5px; 
 
\t left: -1px; 
 
    top: 33px; 
 
    z-index: 999; 
 
} 
 

 
.btn-select ul li { 
 
    padding: 6px; 
 
    text-align: left; 
 
\t background-color: #fff; 
 
\t display: flex; 
 
} 
 

 
.btn-select ul li:hover { 
 
    background-color: #fff; 
 
\t color: #f05423; 
 
} 
 
.btn-select ul li span { 
 
\t color: #b3b3b3; 
 
\t position: absolute; 
 
\t left: 10px; 
 
} 
 

 
.btn-select ul li.selected { 
 
    color: #f05423; 
 
} 
 

 

 
.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active { 
 
    border-color: #b6b6b6; 
 
\t background-color: #fff; 
 
} 
 

 
.btn-select.btn-default ul li.selected { 
 
    background-color: #fff; 
 
} 
 

 
.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value { 
 
    background-color: transparent; 
 
    border: #b6b6b6 1px solid; 
 
\t border-top: 0px; 
 
} 
 

 
.btn-default { 
 
    color: #4f5858; 
 
    background-color: #fff; 
 
    border-color: #e9e9e9; 
 
\t font-size: 13px; 
 
\t font-weight: normal; 
 
} 
 
.btn.active, .btn:active { 
 
    -webkit-box-shadow: none; 
 
    box-shadow: inone; 
 
} 
 

 
.btn-default span { 
 
    color: #4f5858; 
 
} 
 
.btn-select.btn-default ul li.selected span { 
 
    color: #4f5858; 
 
} 
 

 
textarea.form-control { 
 
    height: 100px; 
 
} 
 

 
.dropinput { 
 
    color: #000; 
 
\t background-color: #ebebeb; 
 
\t border: none; 
 
\t padding: 2px 5px; 
 
\t margin-left: 10px; 
 
\t width: 170px; 
 
\t font-size: 12px; 
 
} 
 

 
.oth { 
 
\t width: 300px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
      <a class="btn btn-default btn-select"> 
 
       <input class="btn-select-input" type="hidden"> 
 
       <span class="btn-select-value">Purpose of Enquiry</span> 
 
       <span class="btn-select-arrow glyphicon glyphicon-triangle-bottom"></span> 
 
       <ul style="display: none;"> 
 
        <li>Media & Publications</li> 
 
        <li>New Business Collaborations<input maxlength="30" class="dropinput" type="text" placeholder="Please specify project location"></li> 
 
        <li>Others<input maxlength="58" class="dropinput oth" type="text" placeholder="Please specify"></li> 
 
       </ul> 
 
      </a> 
 
      </div>

TQ

Answer 1

你去那裏：

function init(){ 
    $(document).on('click', '.btn-select', function (e) { 

     if(document.activeElement==$(this).find('.btn-select-value input')[0]) // prevent opening when textfield is focused 
      return 

     e.preventDefault(); 
     var ul = $(this).find("ul"); 
     if ($(this).hasClass("active")) { 
      if (ul.find("li").is(e.target)) { 
       selectLine(this,$(e.target)) 
      } 
      ul.hide(); 
      $(this).removeClass("active"); 
     } 
     else { 
      $('.btn-select').not(this).each(function() { 
       $(this).removeClass("active").find("ul").hide(); 
      }); 
      ul.slideDown(300); 
      $(this).addClass("active"); 
     } 
    }); 

    $('.dropinput').blur(function(e) { 
     if(e.currentTarget.value.length==0) // if nothing has been entered, skip 
      return 
     var dropdown = $(e.currentTarget).parent().parent().parent(); 
     var ul = dropdown.children('ul') 
     selectLine(dropdown[0],$(e.currentTarget).parent()) 
     ul.hide(); 
     dropdown.removeClass("active"); 
    }); 

    $('.dropinput').click(function(e) { 
     e.stopPropagation(); 
    }); 
} 

function selectLine(dropdown,target){ 
    var input_text = target.find('input').val() // take input value from input in list 

    target.addClass("selected").siblings().removeClass("selected"); 
    var value = target.html(); 
    $(dropdown).find(".btn-select-input").val(value); 
    $(dropdown).find(".btn-select-value").html(value); 
    $(dropdown).find(".btn-select-value input").val(input_text); // put input value into input in selected input 
} 

$(document).ready(init) 

這是相當的意大利麪條的代碼，但它的工作原理。把你的代碼封裝到一個init函數中一旦你的文檔準備好就會被調用，這總是很聰明的。