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 itwindow.onclick = function(event) {
  var dropdowns = document.getElementById("myDropdown");
  if (event.target.classList.contains('dropbtn')) {  
    dropdowns.classList.toggle("show");    
  }
  elseif (!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: 0px8px8px0pxrgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-contenta {
  color: black;
  padding: 8px8px;
  text-decoration: none;
  display: block;
}

.dropdowna:hover {background-color: #ddd;}

.show {display: block;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css"rel="stylesheet" /><select></select><divclass="dropdown"><buttonclass="dropbtn"style="border-radius: 3px;border: none;color: black; background-color: white;">&#9881;</button></div><divid="myDropdown"class="dropdown-content"><aid="changeCommand">Commands</a><aid="changePref">Preferences</a><aid="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