Change Placeholder On Link Click In Html

With below code I'm trying to change the placeholder for select element on link click. But no changes are seen as of now. Also I'm trying to figure out how to show div when click o

Solution 1:

You can try the following way:

$(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>

Solution 2:

Just remove remove the subscription on the window.onclick event. The onclick event on you button will be fired when child elements are clicked. Your current logic will show and directly hide the dropdown