This is my experience at least with 1.8. If you’re on 2.0 your experience may vary. Also, I tend to use the built in chromium developer tools a lot. (You may already know this, but I’ll include it in case anyone else finds it. Right click, then click inspect).
When the form.yml or form.yml.erb gets rendered to the page, each attribute listed in that form creates a <div class="form-group"> tag. Inside of that is usually going to be a label and then some kind of element based on the widget from form.yml. In this case, since we’re talking about a widget: select, the rendered HTML should look something like this.
<div class="form-group">
<label class="control-label" for="batch_connect_session_context_**custom_accpart**">custom_accpart</label>
<select class="form-control" name="batch_connect_session_context[**custom_accpart**]" id="batch_connect_session_context_app_name">
<option value="option_1">option_1</option>
<option value="option_2">option_2</option>
<option value="option_3">option_3</option>
</select>
<span class="help-block"><p>some help text</p> </span></div>
Please note that the text between two asterisks will not appear between two asterisks. I put the asterisks around it to emphasize that the values come from your form.yml.
Once you have found the relevant section of rendered HTML, you can then start writing some javascript to get the values of it. I personally prefer JQuery, which is just a javascript library, but you can do vanilla javascript too.
The developer tools in chromium have a cool console app that you can use to write some javascript for quick testing. To get the value of your select widget, you can use something like this in JQuery: ("#batch_connect_session_context_**cluster**").val() or ("#batch_connect_session_context_custom_**accpart**").val(). Again note that the asterisks are not part of the actual code, just an emphasis. This should return the currently selected value of your options dropdown. If you change the selected dropdown value on your screen and rerun this in the console, it should change to the newly selected dropdown value.
You may have already known all that, but I wanted to give that background because it will be important in the next part. You want to set $('#batch_connect_session_context_custom_accpart') based on $('#batch_connect_session_context_cluster') and CustomAccPart.accpartnp/CustomAccPart.accpartkp/etc from form.yml.erb. What I would do is a bit of a hack, but I would define all of your CustomAccPart.acc* values in form.yml.erb and then immediately hide them in form.js. I do not know of a way to directly access Ruby data in JS without “pushing” the Ruby data to the HTML page first. (Unless you have some kind of REST API that you can call with AJAX, but that seems unnecessary when you can just render and hide the values).
You can hide the entire form-group like this: $("#batch_connect_session_context_**CustomAccPart.accpartnp**").parent().hide(). Again, kind of a hack, but it hides the form-group section from the user while providing you access to the Ruby values from form.yml.
Once you have the Ruby values on the page, you can then set an event handler to watch your cluster field so that whenever it changes, you can pull the necessary values from everything and set $('#batch_connect_session_context_custom_accpart').
Here’s what the event handler for a change event might look like:
$("#batch_connect_session_context_**cluster**").change(function() {
alert( "Handler for .change() called." );
});
You will want to gather any values/do any data manipulation inside of that change() function and then you can set the value of $('#batch_connect_session_context_custom_accpart') at the very end of that function like this: $("#batch_connect_session_context_**accpart**").val("VALUE").
So to put that all together, my form.js would look something like this in the end:
$(document).ready(function() {
$("#batch_connect_session_context_**CustomAccPart.accpartnp**").parent().hide();
$("#batch_connect_session_context_**CustomAccPart.accpartkp**").parent().hide();
$("#batch_connect_session_context_**cluster**").change(function() {
cluster = $("#batch_connect_session_context_**cluster**").val();
if (cluster == "CLUSTER_1") {
NEW_VALUE = $('#batch_connect_session_context_custom_accpartnp').val();
}
else if (cluster == "CLUSTER_2") {
NEW_VALUE = $('#batch_connect_session_context_custom_accpartkp').val();
}
$('#batch_connect_session_context_custom_accpart').val(NEW_VALUE);
});
}
Side note: I set up select attributes a little different than your example. Maybe this is already how you’re doing it, but your form.yml.erb didn’t quite look like mine. Here’s how I set mine up
app_name:
label: Application
widget: select
options:
<%- groups.each do |group| -%>
- ["<%= group %>", "<%= group %>"]
<%- end -%>
<%- if groups.length == 0 -%>
- ["", ""]
<%- end -%>
This is similar to yours except that my options values are tuples rather than just singular values. Yours may already be tuples, but I wanted to point this out if you’re having some weird issues.
Hopefully this helps. Let me know if anything is unclear or if this wasn’t what you were looking for.