get value of custom attribute from dropdown to button or link

Question

I need get "perma" value to button when is selected option in dropdown menu.

I have this HTML:

<div class="dropdown-list">
<div><a href="#3303" perma="http://test.com/xxxx/"></a></div>
<div><a href="#3304" perma="http://test.com/xxxx2/"></a></div>
<div><a href="#3305" perma="http://test.com/xxxx3/"></a></div>
<div>

When is selected some div, perma attribute should somehow write into this :

<a href="perma">button</a>

Dropdown list Jquery:

 //.input-dropdown
    jQuery('.input-dropdown input, .input-dropdown > i').on('click',function(){

        var elThis = jQuery(this);
        var elParent = elThis.parents('.input-dropdown');
        var elDropdownList = elParent.find('.dropdown-list');
        
        if( elDropdownList.is(':visible') ){
            elDropdownList.stop(true, true).slideUp(300);            
        }else{
            elDropdownList.stop(true, true).slideDown(300);            
        }
                
    });
    jQuery('.input-dropdown .dropdown-list a').on('click',function(e){
        e.preventDefault();
        
        var elThis = jQuery(this);
        var elParent = elThis.parents('.input-dropdown');
        var elDropdownList = elParent.find('.dropdown-list');
        var elInput = elParent.find('input');
        
        elInput.val(elThis.data('value'));

        elDropdownList.stop(true, true).slideUp(300);
        
    });

    jQuery(document).click(function(event) { 
        if(!jQuery(event.target).closest('.input-dropdown').length) {
            if(jQuery('.input-dropdown .dropdown-list').is(":visible")) {
                jQuery('.input-dropdown .dropdown-list').stop(true,true).slideUp(300);
            }
        }        
    });

What i tried:

<script>function gotosite() {
  window.location = document.getAttribute("perma").perma; 
}</script> <button id="go" onclick="gotosite()">Go</button>

<a href="<?php echo $row['perma'];?>">button</a>

this "perma" attribute taking data from php. It can be jquery also javascript. I tried many things like button or but im 100% sure its not correct at all — koupmi, Jun 21 '22 at 12:10
It seems to me that it is your list that must be built dynamically. Then you get the selected value to do with it what you want in javascript.
... — Monnomcjo, Jun 21 '22 at 12:30
it is dynamic dropdown list. In frontend i have inside correctly variable "perma". Now i need get this "perma" value as href link to another button when is this div in dropdown selected. I thought its possible do with some jquery. — koupmi, Jun 21 '22 at 12:38
Sorry. I don't understand. Do you want that when the user clicks on the button he is redirected according to the value selected in the list? — Monnomcjo, Jun 21 '22 at 12:51
Yes. User select
and button redirect to http://test.com/xxxx/ — koupmi, Jun 21 '22 at 13:00
So, you need javacript or jquery solution. Have a look at related answers on the right. First link is https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript?rq=1 for example — Monnomcjo, Jun 21 '22 at 13:04
But this is the problem. I don't using "select" "option" or "value" and code is totally different from most other codes. — koupmi, Jun 21 '22 at 13:09
It's custom php/html dropdown list with a lot jquery on background — koupmi, Jun 21 '22 at 13:31
I updated topic and add Jquery code what probably have functionality for dropdown select — koupmi, Jun 21 '22 at 13:43
In pure javascript you can have a look at my fiddle https://jsfiddle.net/a0peb8sr/2/ Tell me if this is an acceptable answer? — Monnomcjo, Jun 21 '22 at 13:53
In the link the code doing exactly what i need, but on website im getting null values after click on button. — koupmi, Jun 21 '22 at 14:10
null is probably just log of your new click on button, not in list. A new fiddle with jquery https://jsfiddle.net/facmrgkv/. — Monnomcjo, Jun 21 '22 at 14:40
There was error with jQuery, I modified code like this: jQuery($ => { $('.dropdown-list div a').click(function () { console.log($(this).attr('perma')); console.log($(this).attr('href')); $("#myButton").attr("href", $(this).attr('perma')) }); }); but button still doesnt work, after click in console is correct link, but its replaced with null link after that — koupmi, Jun 21 '22 at 15:03
jQuery or $ syntax depends on your library it's normal. I think I put you on the path. I have no way of seeing the code that resets the link on your button. — Monnomcjo, Jun 21 '22 at 15:12
Yes i think i found the problem. When i click to the center of dropdown element, it return "null", when i click to edge, it return correct adress. So it need probably just some css fix. Is possible also set default link to button before user choose other item? It should be always linked on first item. — koupmi, Jun 21 '22 at 15:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245795/discussion-between-monnomcjo-and-koupmi). — Monnomcjo, Jun 21 '22 at 15:56

score 1 · Accepted Answer · answered Jun 21 '22 at 16:19

With your dropdown list and button

<div class="dropdown-list">
    <div><a href="#3301" perma="http://test.com/xxxx1/">Link 1</a></div>
    <div><a href="#3302" perma="http://test.com/xxxx2/">Link 2</a></div>
    <div><a href="#3303" perma="http://test.com/xxxx3/">Link 3</a></div>
  </div>
<a id="myButton" href="http://test.com/default/">button</a>

You can use Jquery to set href value of your button

$('.dropdown-list div a').click(function () {
    //console.log($(this).attr('perma'));
    //console.log($(this).attr('href'));
    $("#myButton").attr("href", $(this).attr('perma'))
});

get value of custom attribute from dropdown to button or link

1 Answers1