changing select option dropdownlist with onclick function button

Question

i want to change dropdown lists with some buttons, i tried this below codes but it doesnt act like what i want,

if i click the buttons, it creates an extra option, this is ok, no problem, (actually i want change between three existing option, not new one)

normally if i click directly to the existing "option 2", another div element shows text2 with ajax, but if i create a selected "option 2", the div element doesnt refresh, after i click to refresh, div element shown correctly

<select id="id1">
 <option value="1">existingshow1</option>
 <option value="2">existingshow2</option>
 <option value="3">existingshow3</option>
</select>

<button onclick="myFunction1()">111</button>
<button onclick="myFunction2()">222</button>
<button onclick="myFunction3()">333</button>

<script>
function myFunction1() {
    var x = document.createElement("OPTION");
    x.setAttribute("value", "1");
    var t = document.createTextNode("show1");
    x.appendChild(t);
    document.getElementById("id1").appendChild(x).selected = "true";
}

function myFunction2() {
    var x = document.createElement("OPTION");
    x.setAttribute("value", "2");
    var t = document.createTextNode("show2");
    x.appendChild(t);
    document.getElementById("id1").appendChild(x).selected = "true";
}

function myFunction3() {
    var x = document.createElement("OPTION");
    x.setAttribute("value", "3");
    var t = document.createTextNode("show3");
    x.appendChild(t);
    document.getElementById("id1").appendChild(x).selected = "true";
}
</script>

<div></div>

after the selects comes div, but div element created with buddypress activity. actually i hate dropdown list, i want buttons, and i dont know how i change, here is an example, but i delete it soon; benceboyle.net — cfg
– cfg, Commented Mar 24, 2016 at 10:59

Veniamin · Accepted Answer · 2016-03-24 11:05:32Z

2

We have an html:

<select id="id1" onChange="onChange(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<button onclick="addOption();">Add option</button>

Onchange - event, called when select changed

Javascript:

window.addOption = function (){
  var x = document.createElement('option');
  x.setAttribute("value", "new value");
  var t = document.createTextNode("show1");
  x.appendChild(t);

  var select = document.getElementById("id1");
  select.appendChild(x).selected = "true";

  // Trigger select change
  select.onchange();
}

Onchange callback for select

window.onChange = function(select){
  console.log('Select value is: ', select.value);
}

Try: https://jsfiddle.net/otLmwv20/

answered Mar 24, 2016 at 11:05

Veniamin

4673 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cfg Over a year ago

sorry it works in jsfiddle, i see but it doenst work for me. it doesnt refresh also

cfg Over a year ago

benceboyle.net it is an other language but you can see a link named (yenile) in the middle of the content, near the rss button, everything is there

cralfaro · Accepted Answer · 2016-03-24 11:36:09Z

Hi if i understand correctly here is an example of what you could do also:

In your html code I use classes to dont declare functions by each element, and the data attributes to associate for each button different actions.

<select id="id1">
 <option value="1">existingshow1</option>
 <option value="2">existingshow2</option>
 <option value="3">existingshow3</option>
</select>

<button class="buttonAction" data-option="1">111</button>
<button class="buttonAction" data-option="2">222</button>
<button class="buttonAction" data-option="3">333</button>

<div id="idLoadAjax">
</div>

In the JS code is quite simple

$(document).ready(function() {
    $('#id1').change(function(){
        console.log($(this).val());
        loadAjaxContent($(this).val());

    });

    $('.buttonAction').click(function(){
        $('#id1').val($(this).data('option'));
        console.log($(this).data('option'));    
        loadAjaxContent($(this).data('option'));
    });
});

function loadAjaxContent(optionId) {
    $('#idLoadAjax').text("Hey there: " + optionId);
    //$('#idLoadAjax').load(URL);
}

This code should refresh your div content for each time you change your select option or click one of the buttons, I also understand you dont need create new options when the user click on the buttons then i didnt add that logic, tell me if i understand it correctly.

Thanks

yes u understand it correctly, and works fine also... thak you so much

cfg · Accepted Answer · 2016-03-24 11:24:45Z

0

i got an other idea:

there is a refresh link

<a href="/refresh-div">refresh it</a>

it refreshs the expected div, it works fine,

when i click the button 1, it clicks also to the refresh link, is it possible?

answered Mar 24, 2016 at 11:24

cfg

311 silver badge8 bronze badges

2 Comments

Veniamin Over a year ago

you may programmatically click this button, you need get element and then use element.click() For example: var a = document.getElementById('button_id'); a.click();

cfg Over a year ago

okey it works now superbly, thanks a lot, i need to learn javascript as soon as possible

Collectives™ on Stack Overflow

changing select option dropdownlist with onclick function button

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related