jquery how to combine a variable with selectors

Question

I am using a select field with 3 options like this:

<select id="button1">
    <option  value="a">a</option>
    <option  value="b">b</option>
    <option  value="c">c</option>
</select> 

and a list that mirrors the select field

<div class="content" data-name="button1">
    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
</div

what I am trying to do is change the select remotely when a list element is clicked. I have gotten this far, which works:

$(".content li").click(function() {
    var listnumber = $(this).index()
    $("#button1 option").eq(listnumber).prop('selected', true);
});

But then i wanted to add more select fields with corresponding lists but run all of them with the same script

$(".content li").click(function() {
    var listnumber = $(this).index()
    var buttonnumber = $(this).parents().eq(1).attr("data-name")
    $("#" + buttonnumber + "option").eq(listnumber).prop('selected', true);
});

I assume I am not concatenating the selectors correctly with my variable. How is this done correctly?

Answer 1

I think you just need to get the content of the clicked "li" element, let say you selected the first "li" which content is "a". Then you just need to set the value to your select field.

$('#button1').val (selecteLIValue);//"a" or "b"

Answer 2

undefined answered it. I was just missing a space

$("#" + buttonnumber + " option")

thanks