Dropdown select api

I want my selective MENU at “model parameter” out of the there.

How I can do that?

there is my html part and java part… I couldnt handle the javapart for selective menu…

can someone help me?

Anything?

In the ShapeDiver API, a Grasshopper value list is represented by an array of choices. The value to send using the parameter update function is the index of the chosen value. In your case:

If you want to select “CEDRUS”, you would set the parameter value to 0 (in javascript, arrays are indexed starting with 0). Select “PINO” using the value 4.

As you know, you can request the update by calling:

api.parameters.updateAsync({name: "SISTEM SINSI", value: 4);

for example.

Now all you need to do is to connect parameter changes with your options.
First of all, you need to assign a value to each option. I recommend to assign the same value as for the parameter in ShapeDiver.
Then, add a callback for the onchange event, which will be triggered when the option changes:

<select id="SISTEM CINSI" onchange="updateDropdown(this.value);">
    <option value=0>CEDRUS</option>
    <option value=1>JUNIPER</option>
    <option value=2>CARPE</option>
    <option value=3>PINO</option>
    <option value=4>DAPHNE</option>
    <option value=5>AINE</option>
    <option value=6>WILLOW</option>
    <option value=7>OLIVA</option>
    <option value=8>OXIA</option>
    <option value=9>BOSSO</option>
    <option value=10>SELVI</option>
    <option value=11>SEKOYA</option>
</select>

this.value will let you know which option is selected. Now you just need to write the callback function:

function updateDropdown(val) {
  api.parameters.updateAsync({name: "SISTEM SINSI", value: val);
}

Of course, it would be much more preferable to generate this code dynamically by reading the model parameters, like in the codepen example I sent you.

YES… I did it thanks… you are the king =)

function changeLength(val) {
api.parameters.updateAsync({name: “AÇILIM”, value: val});
}
function changeLength(val) {
api.parameters.updateAsync({name: “GENİŞLİK”, value: val});
}
function changeLength(val) {
api.parameters.updateAsync({name: “ÖN YÜKSEKLİK”, value: val});
}
function changeLength(val) {
api.parameters.updateAsync({name: “ARKA YÜKSEKLİK”, value: val});
}
function updateDropdown(val) {
api.parameters.updateAsync({name: “SİSTEM CİNSİ”, value: val1});
}
function updateDropdown(val) {
api.parameters.updateAsync({name: “SİSTEM TİPİ”, value: val});

}

Cushions
AÇILIM
GENİŞLİK
ÖN YÜKSEKLİK
ARKA YÜKSEKLİK
  <div>
<select id="SİSTEM CİNSİ" onchange="updateDropdown(this.value);">
<option value=0>CEDRUS</option>
<option value=1>JUNIPER</option>
<option value=2>CARPE</option>
<option value=3>PINO</option>
<option value=4>DAPHNE</option>
<option value=5>AINE</option>
<option value=6>WILLOW</option>
<option value=7>OLIVA</option>
<option value=8>OXIA</option>
<option value=9>BOSSO</option>
<option value=10>SELVI</option>
<option value=11>SEKOYA</option>
</select></div>
  
<div>
<select id="SİSTEM TİPİ" onchange="updateDropdown(this.value);">
<option value=0>SILVER</option>
<option value=1>GOLD</option>
<option value=2>DIAMOND</option>
</select></div>

Last question about that subject is:

everything is ok but with that ::

codes mixing each other

I try to write ::

function updateDropdown(val) {
api.parameters.updateAsync({name: “SİSTEM TİPİ”, value: val});
order:1
}

but still ixing when try to add more than 1 dropdown and value etc

how can I mix that problem?

You can’t use the same name for your different functions.

All names are different
SİSTEM CİNSİ
SİSTEM TİPİ

But all of them work for last added function now.

for example in my javascrit "the last function is = > >

“function updateDropdown(val) { api.parameters.updateAsync({name: “SİSTEM TİPİ”, value: val});
}”

and even I change “SİSTEM CİNSİ” = " SİSTEM TİPİ" is changing too

I am talking about the name of your javascript functions. You can’t have several functions named changeLength() or updateDropdown(). You need to either have individual names or use one abstracted function that will work for all your parameters (again, exactly like in the codepen I shared with you).

I appreciate your persistence but I do truly hope this was your last question about the subject, because this really has nothing to do with ShapeDiver and even less Grasshopper. Try stackoverflow for example.

1 Like

Yes I know I border you much… But thanks for your assists and patients…

By the way it became ok when I wrote down updateDropdown1() : updateDropdown2() updateDropdown3()

Thanks again