更改 link 上的占位符单击 html

Question

使用下面的代码，我试图在 link 上更改 select 元素的 placeholder 单击。但截至目前没有看到任何变化。我也想弄清楚如何在点击齿轮图标时显示 div 。目前它在点击 div 时有效，但不适用于其中的图标。

<!doctype html>
<html lang="en">
<head>
<!-- Dropdown - >  -->
<!-- focus in-out event >  -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
<script>
$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'rrrrrrr',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    $('.select2-container').click(function() {
      $(this).css('width','500px');
    });    
    $('.select2-container').focusout(function() {
      $(this).css('width','200px');
    });
    $('#changeCommand').click(function() {
      $('select').css('placeholder','Search Command...');
    });    
    $('#changePref').click(function() {
      $('select').css('placeholder','Search Preferences...');
    });
    $('#changeCD').click(function() {
      $('select').css('placeholder','Search Customer Default...');
    });    
});

</script>
<script>
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown -->
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
</head>
<body>
    <select></select> <div class="dropdown"><button class="dropbtn" onclick="myFunction()" style="border-radius: 3px;border: none;color: black; background-color: white;"><span>&#9881;</span></button></div>
  <div id="myDropdown" class="dropdown-content">
    <a id="changeCommand">Commands</a>
    <a id="changePref">Preferences</a>
    <a id="changeCD">Customer Default</a>
  </div>    
</body>
</html>

Answer 1

只需删除删除对 window.onclick 事件的订阅。单击子元素时将触发按钮上的 onclick 事件。您当前的逻辑将显示并直接隐藏下拉列表

Answer 2

您可以尝试以下方式：

$(function() {
  $('select')
    .select2({
      placeholder: 'Search Command...',
      allowClear: true,
      width: '200',
      multiple: false,
      data: [{
        id: '',
        text: ''
      }, {
        id: 'rrrrrrr',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3gffffff'
      }],
      tokenSeparators: ['|']
    })
    .on('select2:open', function() {
      $('.select2-container').css('width','600px');
    })
    .on("select2:close", function () { 
      $('.select2-container').css('width','200px');
    });
    $('#changeCommand').click(function() {
      $('.select2-selection__placeholder').text('Search Command...');
    });    
    $('#changePref').click(function() {
      $('.select2-selection__placeholder').text('Search Preferences...');
    });
    $('#changeCD').click(function() {
      $('.select2-selection__placeholder').text('Search Customer Default...');
    });    
});

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  var dropdowns = document.getElementById("myDropdown");
  if (event.target.classList.contains('dropbtn')) {  
    dropdowns.classList.toggle("show");    
  }
  else if (!event.target.classList.contains("dropbtn") && dropdowns.classList.contains("show")){
    dropdowns.classList.toggle("show");
  }
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select></select> 
<div class="dropdown"><button class="dropbtn" style="border-radius: 3px;border: none;color: black; background-color: white;">&#9881;</button></div>
<div id="myDropdown" class="dropdown-content">
  <a id="changeCommand">Commands</a>
  <a id="changePref">Preferences</a>
  <a id="changeCD">Customer Default</a>
</div>

更改 link 上的占位符单击 html

Change placeholder on link click in html

html

javascript

jquery

jquery-select2