How to disable existing selected items in the select box

background

We are co-developing a baseball scorebook app using Rails. I am selecting a baseball position using a select box that uses an active hash. There was a request to make it impossible to select an existing item.

Therefore, I felt that it was an interesting idea and decided to create it on a trial basis.

Completion image diagram

Image from Gyazo

Concept for implementing the function

First of all, it seems that there are three change patterns 1. Select a value from the initial value-- __2. Select the initial value from the current selection __ __3. Select a value other than the initial value from the current selection __

ActiveHash has the following structure. { id: 1, name: '--' }, {id: 2, name:'throw'}, {id: 3, name:'capture'}, The value value of the option tag is id, and the display value is name. The value value of the select tag will be the value value of the selected option tag.

With this in mind, I decided to consider three possible behaviors.

1. Select from the initial value--
  1. Select a value
  2. The value of select will be the value selected in 1.
  3. For the value of other select tags, the value selected in 2 cannot be selected.
2. Select the initial value from the current selection
  1. Select a value
  2. The value of select will be the value selected in 1.
  3. For the value of other select tags, allow you to select the value before the change in 1.
3. Select a value other than the initial value from the current selection
  1. Select a value
  2. The value of select will be the value selected in 1.
  3. For the value of other select tags, make it impossible to select the value after change in 2 so that the value before change in 1 can be selected.
Summary and consideration of behavior

・ The value currently selected can be found by the value value of select. ・ Currently, I do not know the value that was selected before. __ => It is necessary to set some criteria for judgment. __ -Regarding the initial value, it does not affect anything other than other select tags.

Based on the above information, we will consider the implementation procedure based on the policy of assigning a class name to the previous input value.

Implementation procedure

  1. Get the HTML element of the select tag
  2. Pre-get the number of HTML elements (= options) that are children of the select tag
  3. Set an event when the value of the selected item changes in all select tags
  4. After the event fires, store the selected current value in a variable
  5. Search for a child element (option tag) that has a class name pre-value that is a certificate of the previous selection value.
  6. If there is a applicable element, remove the class name after storing the value as the previous value in the variable
  7. Add class name pre-value to option tag with current value
  8. For select tags other than the part where the slect tag is changed, the disabled attribute is added to the option tag of the newly set value stored in 4. The option tag that applies to the previous value stored in 9.6 removes the disabled attribute.

reduce_position.js



function reduceOption() {
  //Since all the components of the option tag that is a child are the same, the number of elements of the child whose parent is select is also the same.
  const positionSelect = document.querySelectorAll(".input-game-defensive");
  const SelectLength = positionSelect.length;
  const OptionLength = positionSelect[0].children.length;
  
  
  for(let i=0; i<=SelectLength - 1; i++){
    positionSelect[i].addEventListener("change", (e) => {
      const targetValue = positionSelect[i].value;
      const targetChildren = positionSelect[i].children;
      //Initial value on the tag as the previous initial value--Give value value 1 of
      let preValue = 1;
      for(let c=0; c<=OptionLength-1;c++){
        if(targetChildren[c].classList.contains("pre-value")){
          preValue = targetChildren[c].value;
          targetChildren[c].classList.remove("pre-value");
        }
      }
      //Process the HTML element of all select tags.
      targetChildren[targetValue - 1].classList.add("pre-value");
      for(let k=0; k<=SelectLength - 1; k++){
        //Initial value of changed number of select tag elements i, preValue value 1--Execute the process other than.
        if(preValue != 1 && k!=i){
          //Removed invalid attribute that contained the previous value
          positionSelect[k].children[preValue - 1].removeAttribute("disabled");
        }
        if(targetValue != 1 && k!=i){
          //Invalidate the attribute of the newly specified value
          positionSelect[k].children[targetValue - 1].setAttribute("disabled", true);
        }
      }
    });
  };
}
window.addEventListener("load", reduceOption);

Supplementary information

.children Gets the child elements of the currently matching element. You can specify the nth child HTML element for the parent specified by parent element .children [n].

.classList.add, .classList.remove Methods that allow you to add and remove class names

setAttribute("disabled", true) disabled is an attribute that indicates invalidity, and the effect of invalidation can be set as true or false. Since I want to disable it this time, the second argument is described as true.

Finally

Thank you for watching till the end. I think it's been a long time since I described the idea of ​​implementing the function.

To summarize briefly, By having the class name pre-value in the option tag that applies to the current selection value It became possible to distinguish the value after the change and the value before the change, and the desired function could be implemented.

Believing that you can do what you can't do with a little ingenuity, We will continue to implement it.

Recommended Posts

How to disable existing selected items in the select box
How to get the date in java
[Swift] How to pass the Label value in the selected collectionViewCell to the destination TextField
Summary of how to select elements in Selenium
How to check the logs in the Docker container
[Rails] How to use select boxes in Ransack
How to add sound in the app (swift)
How to build the simplest blockchain in Ruby
How to check Rails commands in the terminal
[Swift] How to change the order of Bar Items in Tab Bar Controller [Beginner]
How to set the display time to Japan time in Rails
[Java] How to omit the private constructor in Lombok
Organized how to interact with the JDK in stages
How to specify the resource path in HTML import
How to debug the generated jar file in Eclipse
[Rails] How to display an image in the view
How to get the class name / method name running in Java
How to correctly check the local HTML file in the browser
How to display the select field of time_select every 30 minutes
How to connect the strings in the List separated by commas
How to create a form to select a date from the calendar
How to create a placeholder part to use in the IN clause
How to disable Set-Cookie from API on the front side
How to select a specified date by code in FSCalendar
How to add the same Indexes in a nested array
How to derive the last day of the month in Java
How to switch Java in the OpenJDK era on Mac
[Rails] How to display information stored in the database in view
[Enum_help] Use enum_help to create a select box displayed in Japanese!
[Rails / Routing] How to refer to the controller in the directory you created
How to output the value when there is an array in the array
[jOOQ] How to CASE WHEN in the WHERE / AND / OR clause
How to get the id of PRIMAY KEY auto_incremented in MyBatis
How to install the language used in Ubuntu and how to build the environment
[Behavior confirmed in December 2020] How to implement the alert display function
[JQuery] How to preview the selected image immediately + Add image posting gem
How to solve the unknown error when using slf4j in Java
[Rails] How to reset the database in production environment (Capistrano version)
Measure the bottleneck! How to trace only slow methods in AspectJ
How to call multiple names at once in the same category
How to get the length of an audio file in java
How to increment the value of Map in one line in Java
How to write the view when Vue is introduced in Rails?
How to use the link_to method
How to use Lombok in Spring
How to find May'n in XPath
How to use the include? method
How to hide scrollbars in WebView
How to use the form_with method
How to run JUnit in Eclipse
Pass the i18n locale to JavaScript
How to iterate infinitely in Ruby
[Rails] How to write in Japanese
How to find the average angle
How to run Ant in Gradle
How to master programming in 3 months
How to use the wrapper class
How to learn JAVA in 7 days
How to get parameters in Spark
How to install Bootstrap in Ruby
How to use InjectorHolder in OpenAM