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

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"  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 >
    <button  data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div >
      <div >
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text"  placeholder="Search" autofocus="">
        <div  style="max-height:360px;overflow:auto">
          <button  data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button  data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button  data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button  data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button  data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div >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  data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>

<button  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

CodePudding user response：

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"  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 >
  <button  data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
  <div >
    <div >
      <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text"  placeholder="Search" autofocus="">
      <div  style="max-height:360px;overflow:auto">
        <button  data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
        <button  data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
        <button  data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
        <button  data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
        <button  data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
      </div>
      <div >No results found</div>
    </div>
  </div>
</div>


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