Javascript : Search a tag by a value in a attribute to get the text to modify the text of another tag

Question

I have a html code where I want to find a tag that contains a value in one of its attributes to extract the text of it. Then with this text, I want to change the text of another tag.

Here is the html code :

<select name="client" class="select form-select" id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
    <button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div class="dropdown-menu">
      <div class="d-flex flex-column">
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
        <div class="dselect-items" style="max-height:360px;overflow:auto">
          <button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div class="dselect-no-results d-none">No results found</div>
      </div>
    </div>
  </div>

On another button that it is not in this html, I get an ID : <button onclick="myFunc(this.id)" id="1106">Select client</button>. I get in this case the value 1106 with this function.

I want to find the tag in the html code above that contains the attribute data-dselect-value="1106". It is the same id value from the button. Then I want to extract the text from it, so in the exemple the name "Robert" to be able to change the attribute and the text of the button (still on the html above)

<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>

to

<button class="form-select " data-dselect-text="Robert" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Robert
        </button>

So it means to change the value of the attribute data-dselect-text and the text of the tag by Robert.

I have this code, I do not see how to extract the text of the tage to change it in the another tag

function myFunc(clicked_id){
        
        var elem = document.querySelector('[data-dselect-value="'+clicked_id+'"]');
        
    };

Thank you

Answer 1

Let's use vanilla js for this. There isn't much to explain except the part getting from the dropdown item to the dropdown toggle which involved going up with closest then going down with querySelector.

function myFunc(clicked_id) {

  var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
  var text = elem.innerText;

  var parent = elem.closest(".dropdown");
  var button = parent.querySelector("[data-bs-toggle=dropdown]");
  button.innerText = text;
  button.setAttribute('data-dselect-text', text);
  

};

<select name="client" class="select form-select" id="id_client" style="display : none ">
  <option value="1109">Charles</option>
  <option value="1108">Fred</option>
  <option value="1107">Lionel</option>
  <option value="1106">Robert</option>
  <option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
  <button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
  <div class="dropdown-menu">
    <div class="d-flex flex-column">
      <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
      <div class="dselect-items" style="max-height:360px;overflow:auto">
        <button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
        <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
        <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
        <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
        <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
      </div>
      <div class="dselect-no-results d-none">No results found</div>
    </div>
  </div>
</div>


<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>